onHover 字体颜色不变答案

【问题标题】：onHover font colour not changingonHover 字体颜色不变
【发布时间】：2014-04-28 22:02:01
【问题描述】：

我有一个输入框，当用户开始输入时，它会显示一个 div，其中包含他们可以选择的可能俱乐部的列表。

我现在只是想给它添加一些样式，我的 .clubLink:hover 类有问题。

CSS：

<style>
    .clubList { display: none; width: 250px; margin-top: -5px; margin-left: -4px; border: 1px solid; }
    .clubLink { width: 240px; padding: 5px; }
    a { text-decoration: none; color: black; font-size: 10px; }
    a:hover { color: #FFFFFF; }
    .clubLink:hover { background-color: #0066FF; color: #FFFFFF; }  
</style>

HTML/ColdFusion：

<table width="450" cellpadding="0" cellspacing="0" class="content">
    <tr>
        <th colspan="2" class="content">Club Select</th>
    </tr>
    <tr class="content2">
        <td>
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td align="left" class="content"><strong>Please Select a Club:</strong></td>
                    <td align="left"><input type="text" name="clubFilter" id="clubFilter" class="formItem"></td>
                </tr>
                <tr>
                    <td align="left">&nbsp;</td>
                    <td align="left" class="content">   
                        <div id="clubList" class="clubList">
                            <cfloop query="Variables.getClubs">
                                <div class="clubLink">
                                    <span class="clubName"><a href="passwordreset.cfm?cid=#clubID#">#clubName#</a></span>
                                </div>
                            </cfloop>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

JQuery：

<script>    

$('#clubFilter').bind("keyup", function() {
    var text = $(this).val().toLowerCase();
    var items = $(".clubName");

    items.parent().hide();

    items.filter(function () {
        return $(this).text().toLowerCase().indexOf(text) > -1;
    }).parent().show();

    $('#clubList').css("display", "block");
});

</script>

当我将鼠标悬停在过滤列表中的俱乐部记录 div（clubLink 类）上时，背景颜色会发生变化，但字体颜色仍为黑色。

字体变为白色的唯一一次是当我实际将鼠标悬停在俱乐部名称上并且锚样式应用时。

有人知道我哪里出错了吗？

非常感谢

【问题讨论】：

标签： jquery html css

【解决方案1】：

使用

.clubLink:hover { background-color: #0066FF; color: #FFFFFF; }  
.clubLink:hover a{color: #FFFFFF; }

【讨论】：

谢谢 - 整理好了。将在 8 分钟内接受此作为答案（如果允许）

【解决方案2】：

您的锚点应该有一个display:block 值，当您将鼠标悬停在.clubLink 元素上时触发

【讨论】：

请原谅我的无知，但为什么？
因为它只占用空间作为它的内容（因为它是一个内联元素）。虽然有显示值，设置为block，会占用所有父空间

【解决方案3】：

您正在更改 div 字体的颜色，但文本颜色由 a 给出，因此在悬停 div 时它保持不变是有意义的。你要做的是让a 继承div 的颜色。

http://jsfiddle.net/sY4Gf/

 .clubList {
     display: none;
     width: 250px;
     margin-top: -5px;
     margin-left: -4px;
     border: 1px solid;
 }
 .clubLink {
     width: 240px;
     padding: 5px;
     color:red; /* for testing */
 }
 a {
     text-decoration: none;
     font-size: 10px;
     color:inherit;
 }
 .clubLink:hover {
     background-color: #0066FF;
     color: #FFFFFF;
 }

【讨论】：