禁用跨度悬停答案

【问题标题】：Disabling span hover禁用跨度悬停
【发布时间】：2016-04-13 19:33:18
【问题描述】：

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

Li:hover 效果很好，但是当在跨度上滚动时，效果仍然有效，这就是我不想要的。

在示例中，我希望光标在“日历”上时显示为彩色，但在光标悬停时显示为黑色。

#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

谢谢

【问题讨论】：

我想我没有很好地解释情况。当我在“日历”这个词上时，我想要颜色的日子，而不是当光标在日子上时。无论如何感谢您的回答。

标签： html css hover html-lists

【解决方案1】：

您的 css 样式似乎具有悬停效果，可以更改所有 nth-child(2) 的外观，这是您的 span 元素。拿出来。

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

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

【讨论】：

【解决方案2】：

编辑

您悬停在 LI 上，而跨度是跨度内的子项。改为将悬停应用到锚标签

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

这是你的新JFiddle

【讨论】：