CODEWITHSUNDEEP
htmlcsscss-transitions
Wallace Ferreira
Wallace Ferreira

Reputation: 41

CSS: A transition element does not affect other

I'm wanting to do this transition effect, but it only works on the first div, on Monday that aims to affect the first, nothing happens.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
    #firstElement:hover + #secondElement {
    color:red;
    }
    #secondElement:hover + #firstElement {
    color:blue;
    }
</style>
</head>
<body>
    <p id="firstElement">Hover</p>
    <p id="secondElement">Hello</p>
</body>
</html>

Upvotes: 1

Views: 598

Answers (4)

Mohsen Safari
Mohsen Safari

Reputation: 6795

first you need to set transition (if you mean transition and not hover) to the elements like this:

#firstElement:hover + #secondElement {
    color:red;
    transition:color 0.5s ease;  /* this is an example  */
}

#secondElement:hover + #firstElement {   /*  this is not right selector  */
    color:blue;
    transition:color 0.5s ease;  /* this is an example  */
}

and second there is no backward in CSS, you can just change color of second element by hovering first element.

for doing that you can to use jQuery.

use this JQuery code:

$("#secondElement").hover(function(){
    $("#firstElement").toggleClass("firstcolor");
});

and add this CSS:

.firstcolor{
    color:blue;
}

here is DEMO

note: this is not only way

Upvotes: 2

Arnold Daniels
Arnold Daniels

Reputation: 16573

Why this doesn't work should be clear from the other answers. Here's a solution.

<div id="elements">
    <p id="firstElement">Hover</p>
    <p id="secondElement">Hello</p>
</div>

CSS

#elements:hover #secondElement:not(:hover) {
  color:red;
}
#elements:hover #firstElement:not(:hover) {
  color:blue;
}

DEMO

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

the psuedo hover effect only works on parent-child relationships.

so if you have a menu where Toys is the parent, and barbie dolls, car trucks, and legos are the 3 child elements, you can do psuedo classes.

For example if you did 

#toys:hover #barbiedolls { background: red; }

that would work. But if you tried doing 

#barbiedolls:hover #toys { background: red; }

that would not work. Neither would 

#barbiedolls:hover #cartrucks { background: red; }

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74028

From Adjacent sibling selectors

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

This means #firstElement precedes #secondElement, therefore it works.

But #secondElement doesn't precede #firstElement, therefore it doesn't work.

Upvotes: 0

Related Questions