How to style various elements with different styles in the Hover

Asked

Viewed 201 times

1

I have a div with several links, like this:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

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>

1 answer

1


I only changed a part of your Bruno CSS, but I think you could also improve the HTML formatting. Follow the example:

.wrapper {
    position: relative;
    border: 1px solid black;
    width: 50%;
    padding: 1em;
    margin: auto;
    cursor: pointer;
}
.wrapper > a, .tags a {
    color: black;
    text-decoration: none;
}
.wrapper:hover > a, .tags a:hover {
     text-decoration: underline;
}
.tags {
    position: absolute;
    top: 26%;
    right: 2%;
}
<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>

If it’s not exactly what you need tell me I’ll get you the code.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.