将鼠标悬停在 li 上时如何更改所有字体颜色

关键词：

【中文标题】将鼠标悬停在 li 上时如何更改所有字体颜色【英文标题】：How to change all font color when hovering over an li 【发布时间】：2014-01-07 08:00:12 【问题描述】：

我试图做到这一点，当我将鼠标悬停在一个列表元素（它是一个矩形）上时，里面的所有文本都变成白色，背景变成橙色。

我的问题是当您将鼠标悬停在 li 元素上时，“discProd”类中的文本不会变成白色。只有第一个文本变成白色。

HTML

<ol id="selectable">
    <li class="ui-state-list">
        <b>TD101</b> SmarTach + D: Tachometer</br>
        <h5 class="discProd">Discontinued - See TA300 for replacement model</h5>
    </li>
</ol>

CSS

/*normal paragraph */    
h6  
    font-size: 12px; 
    color:#2D2D2D; 
    font-weight:100; 
    line-height: 1.5em; 


.discProd  
    font-size: 10px; 
    color: red; 
 

#selectable  
    list-style-type: none; 
    width: 900px; 


#selectable li:hover 
    background: orange; 
    color: white; 


.ui-state-list 
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(../images/Products/productBG5.png) 50% 50% repeat-x;
    /*searched bg gloss wave */
    font-weight: normal;
    color: #555555; 

【问题讨论】：

【参考方案1】：

您需要将悬停效果单独应用于您的discProd 类，如下所示：

#selectable li:hover background: orange; color: white; 
#selectable li:hover .discProd background: orange; color: white; 

【讨论】：

【参考方案2】：

将此用于悬停：

#selectable li:hover, #selectable li:hover > .discProd 
    background: orange; 
    color: white;

无需重新定义类，同样适用于.discProd

演示：http://jsfiddle.net/tD8Mv/

【讨论】：

将鼠标悬停在列表上时如何更改锚点颜色

】将鼠标悬停在列表上时如何更改锚点颜色【英文标题】：Howtochangeanchorcolorwhenyouhoveroveralist【发布时间】：2011-05-2011:43:39【问题描述】：我有以下HTML和CSS。当我将鼠标悬停在列表上时，我想更改背景颜色和字体颜色。但是，当... 查看详情

将鼠标悬停在列表上时更改列表中每个链接的颜色

】将鼠标悬停在列表上时更改列表中每个链接的颜色【英文标题】：changethecolorofaeverylinkinalistwhenhoveringoverone【发布时间】：2012-02-2214:27:22【问题描述】：这是一个示例列表：<ul><li><ahref="#">Link1</a></li><li&g... 查看详情

将鼠标悬停在图像上时如何更改 SVG 的颜色？

】将鼠标悬停在图像上时如何更改SVG的颜色？【英文标题】：HowtochangethecoloroftheSVGwhenhoveringovertheimage?【发布时间】：2021-12-1807:48:27【问题描述】：我有一张图片（带有链接）和中间的YouTube徽标。当我将图片悬停时，我希望YouTube... 查看详情

将鼠标悬停在按钮上时仅更改部分文本

】将鼠标悬停在按钮上时仅更改部分文本【英文标题】：onlypartialtextchangeonhoveroverbutton【发布时间】：2013-09-1811:06:24【问题描述】：当鼠标悬停在按钮上时，我希望按钮中文本的字体颜色变为白色且不带下划线。目前，文本颜色... 查看详情

将鼠标悬停在特定 <li> 上时如何更改 <ul> 背景图像？ [复制]

】将鼠标悬停在特定<li>上时如何更改<ul>背景图像？[复制]【英文标题】：Howtochange<ul>backgroundimagewhilehoveronaspecific<li>?[duplicate]【发布时间】：2021-01-1712:58:33【问题描述】：我知道\'li\'它是父\'ul\'的孩子，所以我... 查看详情

将鼠标悬停在按钮上时文本颜色更改

】将鼠标悬停在按钮上时文本颜色更改【英文标题】：Textcolorchangeonhoveroverbutton【发布时间】：2012-08-2119:08:12【问题描述】：我正在尝试更改悬停按钮内文本的颜色。我可以让按钮本身改变颜色，但我希望按钮文本也改变颜色。... 查看详情

将鼠标悬停在 li 上时更改图像并使用 CSS 永久保存该图像

】将鼠标悬停在li上时更改图像并使用CSS永久保存该图像【英文标题】：ChangeimagewhenhoveringoverliandkeepthatimagepermanentusingCSS【发布时间】：2016-09-2210:05:42【问题描述】：对于我的生活，我无法弄清楚。本质上，有一个在页面访问时... 查看详情

将鼠标悬停在地图上时，如何使地图的区域改变颜色？

】将鼠标悬停在地图上时，如何使地图的区域改变颜色？【英文标题】：HowcanImakethemap\'sregionschangecolorwhenhoverthemouseoverit?【发布时间】：2015-02-1318:24:02【问题描述】：我正在使用来自codecanyon的interactivemap。我想进行更改，以便当... 查看详情

Eclipse，将鼠标悬停在关键字上时更改弹出文本背景颜色

】Eclipse，将鼠标悬停在关键字上时更改弹出文本背景颜色【英文标题】：Eclipse,changepopuptextbackgroundcolorwhenhoveringthemouseonakeyword【发布时间】：2011-04-0401:34:03【问题描述】：Ubuntu10.04.1新主题默认将所有窗口背景颜色设置为黑色。... 查看详情

使用 jQuery 将鼠标悬停在相邻文本上时更改图标的颜色

】使用jQuery将鼠标悬停在相邻文本上时更改图标的颜色【英文标题】：ChangeColorofIconWhenHoveringOverAdjacentTextWithjQuery【发布时间】：2021-05-0115:09:40【问题描述】：我见过thisarticle，但我想用JavaScript更改图标的颜色。尝试编写一个函... 查看详情

将鼠标悬停在饼图上时更改饼图的颜色

】将鼠标悬停在饼图上时更改饼图的颜色【英文标题】：changecolorofapiechartwhenhoveringmouseoverit【发布时间】：2017-09-0112:07:21【问题描述】：我刚刚用Python用Tkinter创建了一个饼图，如下所示：deffrac(n):return360.*n/500importTkinterc=Tkinter.Can... 查看详情

悬停在其行上时如何更改特定表格单元格的颜色？ [关闭]

...我尝试到处搜索，但似乎没有一个符合我的描述。当我将鼠标悬停在表格行上时，我只想更改“HelloWorld”的颜色 查看详情

将鼠标悬停在按钮上时如何更改 div 的文本？

】将鼠标悬停在按钮上时如何更改div的文本？【英文标题】：HowdoIchangethetextofadivwhenIhoveroverabutton?【发布时间】：2014-08-0717:01:06【问题描述】：我有什么：连续8个编号的框。我不允许使用jQuery。我想做的事：当用户将鼠标悬停在... 查看详情

jQuery CSS 悬停

...】：2010-12-1103:42:55【问题描述】：我有一个CSS菜单，当将鼠标悬停在父li上时，它会设置其颜色，它是子ul（子菜单）。基本上，当您将鼠标悬停在菜单上时，它会改变颜色并保持这种状态，直到您将鼠标悬停在菜单上并且它是... 查看详情

当用户将鼠标悬停在列表项上时，如何将光标变为手形？

】当用户将鼠标悬停在列表项上时，如何将光标变为手形？【英文标题】：Howtochangethecursorintoahandwhenauserhoversoveralistitem?【发布时间】：2011-03-0612:04:40【问题描述】：我有一个列表，并且我有一个用于其项目的点击处理程序：<u... 查看详情

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情

当用户使用 JQuery 将鼠标悬停在链接上时如何显示图像

】当用户使用JQuery将鼠标悬停在链接上时如何显示图像【英文标题】：HowdoIdisplayanimagewhenauserhoversoveralinkusingJQuery【发布时间】：2011-05-2019:38:28【问题描述】：我有一份产品清单。<ul><li><ahref="chair.php">CHAIR</a></... 查看详情

悬停链接并在 SVG 中更改颜色 [重复]

...5-02-0713:26:47【问题描述】：我创建了一个SVG地图，当我将鼠标悬停在链接上时，我想更改地图目标区域的颜色。当我将鼠标悬停在地图上的某个区域时，链接会从jQ获取下划线类，并且CSS悬停效果会更改地图上的填充颜色。但是... 查看详情