Hide link decoration in paragraph until hover whole paragraph (or div container)?

HTML & CSS
1

If you have a Google Plus account, you’ll see that if a post has a link in it, it won’t change color until you over the whole div container, not just the link. How would I got about doing this? I’ll be applying to my Tumblr theme I am creating. Thanks.

2

Hi erraticfox. Welcome to the forums. :slight_smile:

You can do things like div:hover {} in CSS. Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

div {width: 300px; min-height: 150px; background: #f7f7f7; padding: 20px;}
div:hover {background: #e7e7e7;}
a {text-decoration: none; color: red;}
a:hover, a:focus {text-decoration: underline; color: blue;}
div:hover a {color: blue;}

</style>
</head>
<body>

<div>
    <h1>Heading</h1>
    <p>This is a paragraph <a href="">with a link in it</a></p>
</div>

</body>
</html>