CODEWITHSUNDEEP
htmlcss
M.H Mighani
M.H Mighani

Reputation: 198

applying hover to all elements with same class name with css

In the html code below , every div tag with "right" class name are side of a hollow rectangle at the right side of the screen and the "left" divs are side of a hollow rectangle at the left side of the screen, i want to use hover so when i hover mouse on every side of the left or right rectangle all sides of the rectangle come to top of the screen, html and css codes are shown below:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
    <div class='right'></div>
    <div class='left'></div> 
    <div class='left'></div> 
    <div class='left'></div> 
    <div class='left'></div> 
</div>
</body>
</html>

css code:

body{
    margin: 0;
}

#container{
    position: relative;
    background: #D5D8DC;
    height:400px;
    width: 400px;
    margin-top: 100px;
    margin-left: 100px;
}

.right{
    background: #2ECC71;
}

.right:nth-child(1){
    position: absolute;
    height: 80%;
    width: 10%;
    top: 0;
    right: 0;
}

.right:nth-child(2){
    position: absolute;
    height: 10%;
    width: 80%;
    top: 0;
    right: 0;
}

.right:nth-child(3){
    position: absolute;
    height: 80%;
    width: 10%;
    top: 0;
    left: 20%;
    z-index: 10;
}

.right:nth-child(4){
    position: absolute;
    height: 10%;
    width: 80%;
    right: 0;
    bottom: 20%;
}

.left{
    background: #E74C3C;
}

.left:nth-child(5){
    position: absolute;
    height: 10%;
    width: 80%;
    bottom: 0;
    left: 0;
}

.left:nth-child(6){
    position: absolute;
    height: 80%;
    width: 10%;
    bottom: 0;
    left: 0;
}

.left:nth-child(7){
    position: absolute;
    height: 10%;
    width: 80%;
    left: 0;
    top: 20%;
}

.left:nth-child(8){
    position: absolute;
    height: 80%;
    width: 10%;
    bottom: 0;
    right: 20%;
}

.right:hover{
    z-index: 10;
}

as you see when i used .right:hover{z-index:10} it doesn't apply to all right sides , it applys the z-index to the side that the mouse has hoverd on it...

note: i don't have permission to use javascript or change html code, i should solve the problem just by writing css code

Upvotes: 0

Views: 1855

Answers (2)

user7148391
user7148391

Reputation:

To select other elements based on other elements you can using ~ or +.

in your case ~ is the best approach You can read about all the css HERE

Now those selectors only select downward what i mean is if you'd hover on the last element nothing the above elements won't be affected because it only selects the preceding elements. with in mind we seems like if we hover on the last div would be problematic because it won't select the other div to bring them up however in your case we can manipulate the elements placement, we put the last div the one if we hover over won't affect the other to the top to be the part of the rectangle that is always has a part of it hidden by the other rectangle, so then when we hover over it it will show up if we hover other the other elements it will show up also. Sorry if my explanation is a bit difficult to understand.

here's a working demo 

body {
  margin: 0;
}

#container {
  position: relative;
  background: #D5D8DC;
  height: 400px;
  width: 400px;
}

.right {
  background: #2ECC71;
}

.right:nth-child(1) {
  position: absolute;
  height: 80%;
  width: 10%;
  top: 0;
  right: 0;
}

.right:nth-child(2) {
  position: absolute;
  height: 10%;
  width: 80%;
  top: 0;
  right: 0;
}

.right:nth-child(3) {
  position: absolute;
  height: 80%;
  width: 10%;
  top: 0;
  left: 20%;
  z-index: 10;
}

.right:nth-child(4) {
  position: absolute;
  height: 10%;
  width: 80%;
  right: 0;
  bottom: 20%;
}

.left {
  background: #E74C3C;
}

.left:nth-child(5) {
  position: absolute;
  height: 10%;
  width: 80%;
  bottom: 0;
  left: 0;
}

.left:nth-child(6) {
  position: absolute;
  height: 80%;
  width: 10%;
  bottom: 0;
  left: 0;
}

.left:nth-child(7) {
  position: absolute;
  height: 80%;
  width: 10%;
  right: 20%;
  top: 20%;
}

.left:nth-child(8) {
  position: absolute;
  height: 10%;
  width: 80%;
  top: 20%;
}

.right:hover ~ .right,
.right:hover {
  z-index: 10;
}

.left:hover ~ .left,
.left:hover {
  z-index: 10;
}
<div id='container'>
  <div class='right'></div>
  <div class='right'></div>
  <div class='right'></div>
  <div class='right'></div>
  <div class='left'></div>
  <div class='left'></div>
  <div class='left'></div>
  <div class='left'></div>
</div>

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115374

Based on your HTML structure you can manage this with a sibling selector and well as a direct one, for instance:

.right:hover ~ .right,
.right:hover {
  z-index: 10;
}


body {
  margin: 0;
}

#container {
  position: relative;
  background: #D5D8DC;
  height: 100px;
  width: 100px;
  margin-top: 10px;
  margin-left: 10px;
}

.right {
  background: #2ECC71;
}

.right:nth-child(1) {
  position: absolute;
  height: 80%;
  width: 10%;
  top: 0;
  right: 0;
}

.right:nth-child(2) {
  position: absolute;
  height: 10%;
  width: 80%;
  top: 0;
  right: 0;
}

.right:nth-child(3) {
  position: absolute;
  height: 80%;
  width: 10%;
  top: 0;
  left: 20%;
  z-index: 10;
}

.right:nth-child(4) {
  position: absolute;
  height: 10%;
  width: 80%;
  right: 0;
  bottom: 20%;
}

.left {
  background: #E74C3C;
}

.left:nth-child(5) {
  position: absolute;
  height: 10%;
  width: 80%;
  bottom: 0;
  left: 0;
}

.left:nth-child(6) {
  position: absolute;
  height: 80%;
  width: 10%;
  bottom: 0;
  left: 0;
}

.left:nth-child(7) {
  position: absolute;
  height: 10%;
  width: 80%;
  left: 0;
  top: 20%;
}

.left:nth-child(8) {
  position: absolute;
  height: 80%;
  width: 10%;
  bottom: 0;
  right: 20%;
}

.right:hover~.right,
.right:hover {
  z-index: 10;
}

.left:hover~.left,
.left:hover {
  z-index: 10;
}
<div id='container'>
  <div class='right'></div>
  <div class='right'></div>
  <div class='right'></div>
  <div class='right'></div>
  <div class='left'></div>
  <div class='left'></div>
  <div class='left'></div>
  <div class='left'></div>
</div>

Upvotes: 2

Related Questions