1
I have a div
with several links, like this:
Where in the hover
of div
(wrapper) did only underline the bold text
(title) but when doing hover
in tags
underlined the respective tag and did not underline the bold text
. I leave down a scheme of how it’s done and the code I have so far for better understanding:
What’s gray is the wrapper, the red one bold text
that I want underlined
once the cursor is in the wrapper, blue is div (.tags) and orange are the tags that when the cursor goes through them underline their respective. I’ve got the hover
wrapper working but I’m not getting to do the div's
, the title always appears underlined
.
.wrapper {
position: relative;
border: 1px solid black;
height: 35px;
width: 50%;
padding: 1% 0 0 1%;
margin: auto;
cursor: pointer;
}
.wrapper:not(.tags):hover {
text-decoration: underline;
}
.wrapper a {
color: black;
text-decoration: none;
}
.tags {
position: absolute;
top: 26%;
right: 2%;
}
.tags a:hover .wrapper {
text-decoration: none !important;
}
<div class="wrapper">
<a href="#">
<b>Title</b>
<div class="tags">
<a href="#">Tag1</a>
<a href="#">Tag2</a>
<a href="#">Tag3</a>
</div>
</a>
<div style="clear: both;"></div>
</div>