changing property on hover of another tag

Question

I have two text headers. I want to change the colour of the first header when the user hovers over the second one and vice versa.

#frist{
 }
 
#second{

}

<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>

Answer 1

You can get this to work one way but unfortunately not the other with CSS. As seen in the JSFiddle demo below, the following code allows you to hover on the first heading and change the colour of the second one. You cannot however do this the other way round, as the item you are hovering on has to be above the item whose CSS you want to alter in the HTML document. See this SO answer for more info.

#first:hover + #second {
    color:red;
}

JSFiddle Demo 1 (No javascript)

You can however achieve this functionality with javascript, and I have included another JSFiddle Demo (linked at the bottom) to show you how you would get the result you wanted. Javascript allows you to select any element in the document with the following code:

var first = document.getElementById("first");
var second = document.getElementById("second");

You can then add an event listener to detect when that element is hovered:

first.onmouseenter = function(){

}

If the element has been hovered, you can change the CSS of any other element on the page (even if it before the hovered element):

first.onmouseenter = function(){
    second.style.color = "red";
}

//onmouseleave changes the colour back when the mouse leaves the element

first.onmouseleave = function(){
    second.style.color = "black";
}

second.onmouseenter = function(){
    first.style.color = "red";
}

//onmouseleave changes the colour back when the mouse leaves the element

second.onmouseleave = function(){
    first.style.color = "black";
}

Link to JSFIddle Demo with Javascript

Answer 2

You could do it with JavaScript like so:

const first = document.getElementById('first');
const second = document.getElementById('second');

const toggleActive = selector => selector.classList.toggle('active');

const addHoverListeners = (trigger, target) => {
  trigger.addEventListener('mouseover', () => toggleActive(target));
  trigger.addEventListener('mouseout', () => toggleActive(target));
};

addHoverListeners(first, second);

addHoverListeners(second, first);

.active { color: dodgerblue; }

<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>

Answer 3

If you want to solve with jQuery https://jsfiddle.net/gtnc6mcs/

$("#first").mouseover(function(){
    $("#second").css({
    'background-color' : '#ccc'
  });
}).mouseout(function() {
  $("#second").css({
    'background-color' : 'transparent'
  });
});

$("#second").mouseover(function(){
    $("#first").css({
    'background-color' : '#ddd'
  });
}).mouseout(function() {
  $("#first").css({
    'background-color' : 'transparent'
  });
});

or with javascript https://jsfiddle.net/gtnc6mcs/1/`

var first = document.getElementById('first');
var second = document.getElementById('second');

first.addEventListener('mouseover', function () {
  second.style.backgroundColor = '#ccc';
});
first.addEventListener('mouseleave', function () {
  second.style.backgroundColor = 'transparent';
});

second.addEventListener('mouseover', function () {
  first.style.backgroundColor = '#ddd';
});
second.addEventListener('mouseleave', function () {
  first.style.backgroundColor = 'transparent';
});

Answer 4

With jQuery you can do that very quickly.

You can attach the events mouseenter and mouseleave.

Run the code snippet:

var $second = $('#second');
var $first = $('#first');

$second.on('mouseenter', () => {
  $first.addClass('over-first');
}).on('mouseleave', () => {
  $first.removeClass('over-first');
});

$first.on('mouseenter', () => {
  $second.addClass('over-second');
}).on('mouseleave', () => {
  $second.removeClass('over-second');
});

#first {

}

#second{

}

.over-first {
  color: orange !important;
}

.over-second {
  color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="first">First header</h1>
<hr>
<h1 id="second">Second header</h1>

See? the header element changes its font-color.

Answer 5

For when hovring first element you can do it using CSS element+element Selector but for the second one you will need javascript using nextElementSibling and previousElementSibling Property see the snippet

window.onload = function() {

 document.body.addEventListener("mouseover",function(e) {
  e = e || window.event;
  var targetElem = e.target || e.srcElement;
    
  switch(targetElem.nodeName) {
   case 'H1':
    hovering(targetElem);
   break;
      default:
      var heading = document.getElementsByTagName("h1");
      for(var i = 0 ;i < heading.length;i++){
      heading[i].style.backgroundColor = '';
      }
  }
 },false);

}
function hovering(elm){
 if(elm.nextElementSibling.tagName == 'H1'){
  elm.nextElementSibling.style.backgroundColor = 'blue';
  elm.style.backgroundColor = '';   
   }
   else {
    elm.previousElementSibling.style.backgroundColor = 'blue';
    elm.style.backgroundColor = '';
  }
  
}

body {
    width: 100%;
    height: 100vh;
}

<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>
<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>
<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>

Answer 6

Using CSS you can set #first and #second margin to 0; set #first, #first:hover + #second, and #second:hover to the same default value; set #second, #first:hover, body:hover h1:not(#second) to the same value, to toggle the properties at each adjacent element at :hover

#first, #second {margin:0}
#first, #first:hover + #second, #second:hover {background:red}
#second, #first:hover, body:hover h1:not(#second) {background:green}

<h1 id="first">First header</h1>
<h1 id="second">Second header</h1>