I was wondering how I could make a link turn blue when they hover over the whole div and not just the link itself. Would this be possible to do with just HTML & CSS?
For an example: If I had ( jsfidde ), how would I make the link turn blue if you just hovered over the gray and not the actual link?
<style>
#parent {
background-color: gray;
height: 100px;
width: 200px;
}
#parent img {
margin: auto;
line-height: 90px;
}
#caption a {
text-decoration: none;
color: black;
}
#caption a:hover {
color: blue;
}
</style>
<div id="parent">
<img src="http://www.cedexis.com/images/icons/32-social.png?1389641973" />
<div id="caption"> <a href="jsfiddle.net">This is a caption</a>
</div>
</div>
#parent:hover a
{
color: blue;
}
#parent:hover #caption a {
color:blue;
}
Like this: http://jsfiddle.net/techsin/7MLSb/2/
#parent:hover a {
color: blue;
}
when parent is hovered turn all a's in them blue.
Use this
#parent:hover #caption a {
color: blue;
}
Instead of this
#caption a:hover {
color: blue;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.