I looked if this question had already been answered, but couldn't find anything, only questions on the reverse css rule I am looking for.
I have a div that contains one or more child, and I want it to change its background on hover, but not if hovering one of its children; I need the :hover rule to be restricted to pure element, not its offsprings it contains. Being not a parent rule in CSS, and being :hover triggered whenever the mouse passes over the parent AND its children, I find myself out of ideas, and maybe this result is impossible to achieve with only CSS. However, the question is about CSS, so no JS or JQuery solution is needed (I can provide that by myself)
Code:
HTML
<div class="parent">Text of the parent <p class="class1">I do not need to trigger parent's background color change!</p> </div>
CSS
.parent { background: #ffffff; } .parent:hover { background: #aaaaff; } .class1 { margin: 10px; }
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Suppose we have two div elements with an id of one and two . We want to perform #one:hover and target a style change in #two . In order to do this, the two elements must be directly related: either a parent-child or sibling relationship.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
You might have linked your stylesheet to your HTML file improperly. Some other CSS in the context of your project may be overriding the piece that you've given here. You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
You can simply achieve this by adding this property to the child class CSS.
pointer-events: none;
This worked for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With