CODEWITHSUNDEEP
htmlcss
Evgenij Reznik
Evgenij Reznik

Reputation: 18614

Perform action when focused

I have 3 divs. 2 of them change their color when focused. Can also an action be performed on another div when 2 of them get focused?

div {
  border: 1px solid;
  margin: 5px;
  width: 300px;
  height: 50px;
  padding: 2px;
}
.myClass:focus {
  background-color: yellow;
  outline: none;
}
<div class="myClass" tabindex="-1">
  Focus me!
</div>
<div class="myClass" tabindex="-1">
  You can focus me too!
</div>
<hr />
<div class="anotherClass">
  I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>

So when 1 of the 2 upper divs get focused I want the 3rd div at the bottom to change its color.

Here you can have a look: https://jsfiddle.net/ogpvvwtg/

Upvotes: 1

Views: 45

Answers (3)

Jake Haas
Jake Haas

Reputation: 73

You can also accomplish this using JavaScript:

First give the divs IDs:

<div id="topDiv" class="myClass" tabindex="-1">

etc...

Then you can find them with:

var top_div = document.getElementById('top_div');
var middle_div = document.getElementById('middle_div');
var bottom_div = document.getElementById('bottom_div');

Assign an event listener to the objects. This allows you to call a function when an element is focused:

top_div.addEventListener("focus", changeBottomDivColor);
middle_div.addEventListener("focus", changeBottomDivColor);

And finally, the function to actually change the color:

function changeBottomDivColor() {
    bottom_div.style.backgroundColor = "red";
}

Upvotes: 0

Ben Glasser
Ben Glasser

Reputation: 3364

you can do this with a little bit of javascript which might give you more control of the things you want to color. 

colorDiv3 = function() {
  window.document.getElementById("div3").style.backgroundColor = "lightGreen";
}
  div {
    border: 1px solid;
    margin: 5px;
    width: 300px;
    height: 50px;
    padding: 2px;
  }
  .myClass:focus {
    background-color: yellow;
    outline: none;
  }
<div class="myClass" tabindex="-1" onFocus="colorDiv3()">
  Focus me!
</div>
<div class="myClass" tabindex="-1" onFocus="colorDiv3()">
  You can focus me too!
</div>
<hr />
<div id="div3" class="anotherClass">
  I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>

Upvotes: 1

j08691
j08691

Reputation: 208002

Sure, you can use the general sibling selector ~

.myClass:focus ~ .anotherClass {
    background-color: red;
    outline: none;
}


div {
    border: 1px solid;
    margin: 5px;
    width: 300px;
    height: 50px;
    padding: 2px;
  }
  .myClass:focus {
    background-color: yellow;
    outline: none;
  }
  .myClass:focus ~ .anotherClass {
    background-color: red;
    outline: none;
  }
<div class="myClass" tabindex="-1">
  Focus me!
</div>
<div class="myClass" tabindex="-1">
  You can focus me too!
</div>
<hr />
<div class="anotherClass">
  I cannot be focused, but want to change my color, when one of the other divs above me get focused.
</div>

Upvotes: 6

Related Questions