禁用跨度悬停

Question

我想禁用跨度上的悬停效果。

李：悬停进展顺利，但是当跨越范围时，效果仍然有效，这就是我不想要的。

在示例中，我想要光标在“日历”上方时的颜色，但是当光标在它上面时为黑色。

#topnav li:nth-child(1) a:hover{
	color:#ff0000;
	}

#topnav li:nth-child(2) a:hover{
	color:#FF77FF;
	}

	#topnav li:nth-child(3) a:hover{
	color:#55FFFF;
	}
  
  #topnav li:hover span{
	color:#ff0000;
	}

#topnav li:nth-child(2):hover span{
	color:#FF77FF;
	}

	#topnav li:nth-child(3):hover span{
	color:#55FFFF;
	}

<div id="topnav">
<ul>
  <li><a href="a.html">Calendar</a><span> Monday</span></li>
  <li><a href="b.html">Calendar</a><span> Tuesday</span></li>
  <li><a href="c.html">Calendar</a><span> Wenesday</span></li>
</ul>
</div>

以下是jsfiddle

由于

Answer 1

修改

你正在盘旋李，跨度是一个跨越的孩子。将悬停应用于anchortag而不是

#topnav li:hover a{
   color:#ff0000;
}

这是您的新JFiddle

Answer 2

看来你的css样式有悬停效果来改变所有nth-child（2）上的外观，这是你的span元素。拿出来。

＆＃13;

＆＃13;

#topnav li:nth-child(1) a:hover{
	color:#ff0000;
	}

＆＃13;

<div id="topnav">
<ul>
  <li><a href="a.html">Calendar</a><span> Monday</span></li>
  <li><a href="b.html">Calendar</a><span> Thursday</span></li>
  <li><a href="c.html">Calendar</a><span> Wenesday</span></li>
</ul>
</div>

＆＃13;

＆＃13;

＆＃13;