Question

我有两个文本标题。当用户将鼠标悬停在第二个标题上时，我想更改第一个标题的颜色，反之亦然。

＆＃13;

#frist{
 }
 
#second{

}

＆＃13;

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

＆＃13;

Answer 1

你可以通过一种方式使用它，但遗憾的是不能使用CSS。如下面的JSFiddle演示中所示，以下代码允许您将鼠标悬停在第一个标题上并更改第二个标题的颜色。但是，您不能反过来这样做，因为您正在悬停的项目必须位于要在HTML文档中更改其CSS的项目上方。有关详细信息，请参阅this SO回答。

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

JSFiddle Demo 1 (No javascript)

然而，您可以使用javascript实现此功能，并且我已经包含了另一个JSFiddle演示（在底部链接），以向您展示如何获得您想要的结果。 Javascript允许您使用以下代码选择文档中的任何元素：

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

然后，您可以添加一个事件侦听器来检测该元素何时悬停：

first.onmouseenter = function(){

}

如果元素已悬停，您可以更改页面上任何其他元素的CSS（即使它在悬停元素之前）：

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

您可以使用JavaScript这样做：

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

如果你想用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'
  });
});

或使用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

使用jQuery，你可以很快完成。

您可以附加活动mouseenter和mouseleave。

运行代码段：

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>

请参阅？ header元素更改其font-color。

Answer 5

对于hovring第一个元素，你可以使用CSS元素+元素选择器但对于第二个，您将需要使用nextElementSibling和previousElementSibling属性的javascript查看代码段

＆＃13;

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 = '';
  }
  
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 6

使用CSS，您可以将#first和#second margin设置为0;将#first，#first:hover + #second和#second:hover设置为相同的默认值;将#second，#first:hover，body:hover h1:not(#second)设置为相同的值，以切换: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>

在悬停另一个标签时更改属性

6 个答案: