Question

我有一个简单的表格，下一栏中有1个标题和一个下拉箭头图像。我希望该图像始终隐藏，只有当鼠标悬停在图像上时才会显示。我尝试使用：hover属性但不显示结果我的代码是这样的。

编辑：

我在opacity属性的帮助下实现了上述目标。现在我需要做的是在点击图片时显示带有指向页面链接的下拉列表。我是jquery的新手，我已经写了大纲功能，但是对于要写什么来显示带链接的下拉列表一无所知。

这是功能：

<script>
$(document).ready(function(){

    $("#ddImg").click(function(){
/// 

    });

});
</script>

HTML

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head> 

<div class="Table">
    <div class="Row" >
        <div class="Cell">
            <p>Dummy Title</p>
        </div>
        <div id="divImg" class="Cell" >
            <img class="image" id= "ddImg" src="images/MENUDARK.gif" />
            </div>
    </div>
</div>

CSS

   <style type="text/css">
    .Table
    {
        display: table;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }

    .image
    {
        opacity: 0;
    }

    .cell:hover .image
    {
        opacity: 1;
    } 
</style>

Answer 1

更改您的

#arrow img:hover

到

#arrow:hover

在你的情况下，选择器意味着“在带有id箭头的标签中找到图像”，但你需要“找到带有id箭头的标签”

UPD 正如@something所说，你应该将.cell:hover更改为.Cell:hover。 classNames是区分大小写的，所以.cell != .Cell

Answer 2

img#arrow  {
    background-image:url("/images/MENUDARK.gif");
    opacity: 0;
}

img#arrow:hover {
    opacity: 1;
}

Answer 3

试试这个：

#ddImg:hover
{
background-image:url("/images/MENUDARK.gif");
}

您的img标记没有任何内容，因此光标无法识别它。所以在这里添加div id以使其可行。

Demo Fiddle

Answer 4

请检查以下代码：

<强> DEMO

<强> HTML

<div class="Table">
    <div class="Row" >
        <div class="Cell">
            <p>Dummy Title</p>

        </div>
        <div class="cell">
            text here
            <img src="http://img.b8cdn.com/images/templates/bayt/4.0/bayt-logo-new-en.png" class="image"/>
        </div>
    </div>

</div>

<强> CSS

.image {
    opacity: 0;
}

.cell:hover .image {
    opacity: 1;
}

Answer 5

$(".cell img").hover(function() {
    $(this).addClass("cfse_a");
}, function() {
    $(this).removeClass("cfse_a");
});

试试这个代码它会起作用并给出这个类的风格

鼠标悬停时显示图像

5 个答案: