CODEWITHSUNDEEP
css
milk
milk

Reputation: 434

Change text color when hovering over div

I'm trying to change the color of the text to white as soon as the mouse hovers over the shape.

Here's a fiddle with what I have so far: http://jsfiddle.net/4cjrmpy6/

Would I need to use a :before or :after pseudo element on 

#stern a

to achieve this? 

#stern {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
    background-size:100%;
    text-align: center;
    vertical-align: middle;
    width: 165px;
    height: 75px;
    position:absolute;
    display:table;
}

.sterntext {
z-index: 999;
position: relative;
height: 75px;
vertical-align: middle;
display: table-cell;
padding:0 7px;
}

#stern:hover {
    background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
no-repeat center;
    color:#fff;
    background-size:100%;
}

#stern a {
    color:#000;
    text-decoration:none;
}

#stern a:hover {
color:#fff;
}

I'd really appreciate any help!

Upvotes: 0

Views: 71

Answers (1)

Oriol
Oriol

Reputation: 288710

Probably, you want

#stern:hover a {
    color:#fff;
}

That is, set the color of the element a when #stern is hovered.

#stern {
  background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-svg.svg?8854319133829452732')
    no-repeat center;
  background-size:100%;
  text-align: center;
  vertical-align: middle;
  width: 165px;
  height: 75px;
  position:absolute;
  display:table;
}
.sterntext {
  z-index: 999;
  position: relative;
  height: 75px;
  vertical-align: middle;
  display: table-cell;
  padding:0 7px;
}
#stern:hover {
  background:url('//cdn.shopify.com/s/files/1/0636/3475/t/16/assets/stern-blue-filled-svg.svg?18364800561828232638')
    no-repeat center;
  color:#fff;
  background-size:100%;
}
#stern a {
  color:#000;
  text-decoration:none;
}
#stern:hover a {
  color:#fff;
}
<div id="stern">
  <p class="sterntext">
    <a href="#">The venga bus is coming</a>
  </p>
</div>

Upvotes: 3

Related Questions