CODEWITHSUNDEEP
javascripthtmlcss
Iter Ator
Iter Ator

Reputation: 9289

Dont apply hover effect to parent

I would like to change the color of the div, over which the mouse cursor is. But only one element, I dont want to apply the new color to the parent elements.

I tried this, but I have no idea, how to solve this.

HTML:

<div>
    <div>a</div>
    <div>b</div>
    <div>
        <div>c</div>
        <div>d</div>
    </div>
</div>
<div>
    e
</div>

CSS:

div {
    padding: 5px;
    border: 1px solid black;
}
div:hover {
    background: green;
}

JSFiddle: http://jsfiddle.net/Lurwp7ey/

Upvotes: 2

Views: 87

Answers (3)

Wayne Smith
Wayne Smith

Reputation: 4868

CSS4 will use an exclamation point to allow styling of a parent element -- with CSS4 add one rule. http://www.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

div {
    padding: 5px;
    border: 1px solid black;
}
div:hover {
    background: green;
}
div! div { /* if a div contains a div apply this rule to parent div*/
    background: white;
}

And there is a lib that already supports it on browsers that do not come from the future.

<script src="jQuery.cssParentSelector.js"></script>

Upvotes: 1

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

If you want to use jQuery, here it is:

$(".not_parent").hover(function(e){
    $(this).css("background-color","green");
    e.stopPropagation();
    },function(e){
    $(this).css("background-color","white");
        e.stopPropagation();
  });

<div>
    <div class="not_parent">a</div>
    <div class="not_parent">b</div>
    <div>
        <div class="not_parent">c</div>
        <div class="not_parent">d</div>
    </div>
</div>
<div class="not_parent">
    e
</div>

http://jsfiddle.net/Lurwp7ey/3/

@chris's solution is better, use jquery only if you would want additional effects.

Upvotes: 0

chris97ong
chris97ong

Reputation: 7060

You could try this.

HTML:

<div>
<div class="c">a</div>
<div class="c">b</div>
<div>
    <div class="c">c</div>
    <div class="c">d</div>
</div>
</div>
<div class="c">
e
</div>

CSS: 

div {
    padding: 5px;
    border: 1px solid black;
}
.c:hover {
    background: green;
}

Fiddle.

Upvotes: 4

Related Questions