How to style multiple elements with different hover styles

Question

How to style multiple elements with different hover styles

Navigation

#1 by (1 votes)

1

I have a div with multiple links, like this:

Whereinhoverofdiv(wrapper)onlymadetheunderlineofboldtext(title)butdoinghoverintagsunderlineditstaganddidnotunderlineboldtext.IleavebelowaschematicofhowitisdoneandthecodethatIhavesofarforbetterunderstanding:

Whatisgrayisthewrapper,inredtheboldtextthatIwantunderlinedoncethecursorisinthewrapper,blueisthediv(.tags)andorangearethetagsthatwhenthecursortounderlinethem.Ialreadyhavethewrapper%wizard%workingbutIamnotabletodothe%wrapperpart,thetitlealwaysappears%wrapper%.

.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>

html css css-hover hover

asked by anonymous 15.11.2017 / 15:03

1 answer

Difficulty in recovering BRANCH information given a PRODUCT, many-to-many relationship How to know that the attribute is not null in the PostgreSQL database?

score 1 · Accepted Answer

I've only changed a part of your Bruno CSS, but I think you could also improve the formatting of HTML. Here's 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 that I'll get the code for you.