change color of span when passing mouse in li

Question

change color of span when passing mouse in li

Navigation

#1 by (5 votes)

2

I have the following HTML:

.menu {
  width: 100%;
  height: 75px;
  background: #474747;
}
.menu li {
  height: 75px;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
}
.menu span {
  font: 700 18px/18px"Open Sans";
  color: #fff;
  line-height: 75px;
}
.menu li:hover {
  background: #fff;
}
.menu li span:hover {
  color: #474747;
}

<div class="menu">
  <div class="grid_960 margin-auto">
    <ul>
      <li>
        <span>Home</span>
      </li>
    </ul>
  </div>
</div>

I want when I hover over the li , the span changes. For now, span is changing only when I hover over span .

css

asked by anonymous 07.03.2015 / 06:17

1 answer

How to sum a field of a certain ID with multiple records? How to differentiate inputs that have the same class?

score 5 · Accepted Answer

You went the right way, but you put :hover in the wrong place.

To change the style of span (child) when hovering on li (parent), css should look like this:

.menu li:hover span {
  color: #474747;
}

This selector indicates that the style should be applied to span within a li with the pseudo-class :hover .

.menu {
  width: 100%;
  height: 75px;
  background: #474747;
}
.menu li {
  height: 75px;
  text-transform: uppercase;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  float: left;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition: all 200ms cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  /* easeInOutExpo */
}
.menu span {
  font: 700 18px/18px"Open Sans";
  color: #fff;
  line-height: 75px;
}
.menu li:hover {
  background: #fff;
}
.menu li:hover span {
  color: #474747;
}

<div class="menu">
  <div class="grid_960 margin-auto">
    <ul>
      <li>
        <span>Home</span>
      </li>
    </ul>
  </div>
</div>