0

How do I change CSS properties of elements according to CSS properties of other elements? For instance; I want to change the default position of "bigbutton" if the color of "div1" is black. This is what I've tried:

HTML

 <div> <div class="div1"> </div>  <div class="div2"></div> <div class="div3"></div> <button type="button" class="bigbutton">bigbutton </button> </div>

CSS

.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; } .div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; } .div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal; .bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }

JQUERY

$(document).ready(function(){ $('.div1').mouseenter(function(){ $(this).css('background','black'); }); $('.div1').mouseleave(function(){ $(this).css('background',''); }); $('.div2').mouseenter(function(){ $('.div1').css('background','yellow'); }); $('.div2').mouseleave(function(){ $('.div1').css('background',''); }); $('.div3').mouseenter(function(){ $('.div1').css('background','black'); }); $('.div3').mouseleave(function(){ $('.div1').css('background',''); }); if($('.div').css('background') == 'black'){ $('.bigbutton').css('left','200px'); } else{ $('.bigbutton').css('left','100px'); } });

Is it possible to do it without if-else? PS:I apologise for the formating problem, as it's nearly impossible to properly format with my phone.Thank you.

Improve this question
1
  • 1
    Why don't you put those other css properties inside the mouse event handlers? Note that toggling a clss might also make this simpler and use css rules based on the class Commented Feb 23, 2019 at 18:23

3 Answers 3

Reset to default
1

When you say "change x according to y", you're basically describing an if conditional. Given your example, you can also get the desired result by changing the button's position in the same code block where the div1 becomes black: https://codepen.io/pen/RvXQMP

Update

To get the desired result for any input that would change the color of div1, you can use Mutation observer, works like an eventListener for DOM changes: https://codepen.io/pen/PVMVzw

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

My mistake, I should've been more specific. The postion of bigbutton should not change on mouseenter of div1, but only when the color is black. Because if we add more elemets that change the color of div1 to black, big button should change its position.I've edited the code to better explain the scenario.
Updated answer with a solution for every change that makes div1 have black background, hope it helps.
This is what I exaclty wanted. Thank you.
0

first of all you need to get the color of the bigbutton

var color = $('.bigbutton').css('color');

then do your check

if(color == "red"){ //example
 $('.div1').css('top':'10px') // finally do your changes [for example]
}
Improve this answer

Comments

0

you can try it, html code:

  <div id="container">
   <div class="div1"> </div>
   <div class="div2"></div>
   <div class="div3"></div> 
   <button type="button" class="bigbutton">bigbutton </button>
  </div>

css code:

.div1{ position:fixed; left: 10px; width:100px; height: 100px; background-color: red; }
.div2{ position:fixed; left: 10px; top: 110px; width:100px; height: 100px; background-color: green; }
.div3{ position:fixed; left: 10px; top: 220px; width:100px; height: 100px; background-color: teal;} 
.bigbutton{ position: fixed; left: 15px; width: 100px; height: 30px; background-color: blue; }

javascript code:

container.onmouseover = container.onmouseout = handler;
function handler(event){
  if (event.type == 'mouseover') {
    if(event.target.className=='div1'){
       event.target.style.background = 'black';
       moveLeft();
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = 'yellow';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = 'black';
       moveLeft();
    }
  }
  if (event.type == 'mouseout') {
    if(event.target.className=='div1'){
       event.target.style.background = '';
    }
    if(event.target.className=='div2'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    if(event.target.className=='div3'){
      document.getElementsByClassName('div1')[0].style.background = '';
    }
    moveRight();
  }
}

function moveLeft(){
    $('.bigbutton').css('left','200px');
}
function moveRight(){
   $('.bigbutton').css('left','100px');
}
Improve this answer

1 Comment

Hello, thank you for taking time to answer. This method works very well, but it's a little different from what I wanted.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.