change span color when mouse on li

Asked

Viewed 20,100 times

3

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 mouse over the li, the span change. For today, the span is changing only when I hover over the span.

css

1 answer

6


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

To change the style of span (child) when passing the mouse on li (parent), the 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>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.