Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS hover on a div, but not if hover on his children [duplicate]

Tags:

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;     } 
like image 315
Nillus Avatar asked Mar 08 '14 13:03

Nillus


People also ask

Can you put a hover on a div?

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.

How do I make hover affect another 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.

What does &: hover do in CSS?

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.

Why Hover is not working on div?

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.


1 Answers

You can simply achieve this by adding this property to the child class CSS.

pointer-events: none; 

This worked for me.

like image 96
sam thomas Avatar answered Oct 07 '22 13:10

sam thomas