Applying CSS on hover over multiple components
I have a form that has three components:
* ***************************** *
*** * * ***
***** * * *****
******* ***************************** *******
As shown in the diagram above, the shape consists of a rectangle surrounded by two triangles (one on the left and one on the right).
I would like the entire shape to change to the same color when the user hovers over any of its components.
I have tried various methods to accomplish this task, but without much success.
Here's what I currently have on a JSFiddle .
The form is kind of disabled, however my main problem is how to get the hover function to work on my object.
Even though I tried to implement JavaScript in the above script, I will accept any other alternative methods that will make my code work.
source to share
First, your JSFiddle was not showing .slopeRight, I added the following html:
.slopeRight {
border-bottom: 100px solid #D8D8D8;
border-right: 50px solid transparent;
position: absolute;
top: 10px;
left: 255px;
}
Then I surrounded all the rectangle components under one div called .wrap and added the following css:
.wrap:hover .tabStyle {
backGround: red;
border-color: red;
}
.wrap:hover .slopeLeft {
border-color: transparent red red transparent ;
}
.wrap:hover .slopeRight {
border-bottom: 100px solid red;
border-right: 50px solid transparent;
}
Fiddle works here ... http://jsfiddle.net/svzrkdu6/10/
Also, are you sure you want to get 3 shapes? Because if not, you can create a trapezoid instead, which is much more concise ... check this fiddle
source to share
I did it like here:
<div class="container">
... your code
</div>
.container:hover .tabStyle{
background : #000;
border-color: #000;
}
.container:hover .slopeLeft, .container:hover .slopeRight{
border-bottom-color: #000;
}
where .container is the parent of
JSFiddle: http://jsfiddle.net/svzrkdu6/12/
source to share
This is achieved with pure CSS. Change your line of code:
/* Just for an example */
.child {
height: 20px;
border: 1px solid black;
}
/* Your solution */
.parent:hover .child {
background-color: red;
}
<div class="parent">
<div class="child first">A</div>
<div class="child second">B</div>
<div class="child third">C</div>
</div>
source to share