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>

