CODEWITHSUNDEEP
htmlcss
ram
ram

Reputation: 2343

Avoid hover effect on specific Child div though hover applied to Parent div

I have an issue with hover

I have 3 child div's like:

<div class="parent">
    <div class="child1">A</div>
    <div class="child2">B</div>
    <div class="child3">C</div>
</div>

I had applied hover on parant div to change color on child1 and child2 div. Yet hover is applied over child3 div too....

Is there a way to exclude hover on child3 alone??

Any help is appreciated. Thanks in advance.

div.parent:hover {
    color: #909090;
}

In the the above example there has to be no change of color on font "C" though it is present inside parant div.

Upvotes: 4

Views: 5680

Answers (7)

evilReiko
evilReiko

Reputation: 20473

div.parent:hover {
    color:#909090;
}

Your CSS is saying "select DIV tags with class parent and apply the following CSS only on hover state, then change font color to #909090".

First, if you want hover state on the child, do this:

/* explanation: select DIV tags with "child" class on hover state */
div.parent div:hover {
    /* apply your CSS here */
}

If you want to make specific CSS for some tags and exclude it from other tags, be more specific. You can add more than 1 class to any tag. For example, let's add another class for child1 and child2 for special hover state, and exclude it for child3:

<div class="parent">
    <div class="child1 myHoverClass"></div>
    <div class="child2 myHoverClass"></div>
    <div class="child3"></div>
</div>

Now it's easy to control that with CSS:

/* explanation: find parent class div, then select children DIV tags with class name "myHoverClass" and apply CSS for hover state only.. in this case, only child1 and child2 DIV tags */
div.parent div.myHoverClass:hover {
    /* apply your CSS here */
}

Note: watch out for spaces in CSS, they are very sensitive and it could completely mean something else without cautious use.

Upvotes: 2

Bharat Soni
Bharat Soni

Reputation: 2902

add a different class to child1 and child2 like this may be:

<div class="parent">
    <div class="test child1"></div>
    <div class="test child2"></div>
    <div class="child3"></div>
</div>

.test:hover{background-color:red;}

Upvotes: 0

Gangadhar
Gangadhar

Reputation: 1749

 div.parent:hover .child1,div.parent:hover .child2{
    color: #909090;
}

Upvotes: 0

gvee
gvee

Reputation: 17161

div.parent:hover > :not(.child3) {
    color:#909090;
}

Upvotes: 0

RONE
RONE

Reputation: 5485

.child1:hover, .child2:hover {
    color:#909090;
}

FIDDLE DEMO

Upvotes: 0

Leo T Abraham
Leo T Abraham

Reputation: 2437

You can try adding the style

.child3
{
    color : #000;
}

DEMO

Upvotes: 1

robooneus
robooneus

Reputation: 1344

Just make your CSS more specific:

.parent:hover .child1, .parent:hover .child2 {
    color:#909090;
}

Upvotes: 6

Related Questions