Reputation: 434
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
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