change div css property on hover button which is after the div

Question

hover on button but div does not change its property

change CSS property of div by hovering on another tag(button) which is created after it

.zz {
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  color: white;
  background: red;
  border: 4px solid black;
  margin: 100px;
  -webkit-transition: transform 1s;
  -webkit-transition-timing: ease-in-out;
  -webkit-transition-delay: 0.1s;
  float: left;
}

#btn:hover~.zz {
  background: green;
  -webkit-transform: rotate(40deg) translate(100px, 20px);
}

<div class="zz"> this is div</div>
<button id="btn"> hover me </button>

Like so not possible with CSS. You'll need javascript or change the markup. — caramba, Oct 04 '17 at 07:56

score 5 · Answer 1 · answered Oct 04 '17 at 07:57

You need to place the div after the button in the DOM for sibling selector. Or, you could use javascript to add a class to the .zz div.

.zz {
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  font-weight: bold;
  width: 100px;
  height: 100px;
  color: white;
  background: red;
  border: 4px solid black;
  margin: 100px;
  -webkit-transition: transform 1s;
  -webkit-transition-timing: ease-in-out;
  -webkit-transition-delay: 0.1s;
  float: left;
}

#btn:hover ~ .zz {
  background: green;
  -webkit-transform: rotate(40deg) translate(100px, 20px);
}

<button id="btn"> hover me </button>
<div class="zz"> this is div</div>

score 0 · Answer 2 · edited Oct 04 '17 at 10:19

#btn:hover ~ .zz, Selects every .zz class that are preceded by a #btn id when #btn is hover,but in your case #btn is before of .zz,so .zz is not selected.

So,Just Change :

<div class="zz"> this is div</div>    ---
<button id="btn"> hover me </button>     |
                            Here   <-----

To:

<button id="btn"> hover me </button>
<div class="zz"> this is div</div>

.zz{ text-align:center; 
  line-height:100px; 
  font-size:20px; 
  font-weight:bold; 
  width:100px; height:100px; 
  color:white; 
  background:red; 
  border:4px solid black;
   margin:100px;
   
-webkit-transition: transform 1s ;
-webkit-transition-timing:ease-in-out;
 -webkit-transition-delay:0.1s;
  float:left;
    }
    
    #btn:hover ~.zz{ background:green;
                -webkit-transform:rotate(40deg) translate(100px,20px);
                
                
            }

<button id="btn"> hover me </button>
<div class="zz"> this is div</div>

change div css property on hover button which is after the div

2 Answers2