Html 在鼠标上方显示图像

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

编辑：

我通过不透明度属性实现了上述功能。现在我需要做的是显示一个下拉列表，其中有一个指向点击图片页面的链接。我不熟悉jquery，我编写了大纲函数，但不知道该编写什么来显示带有链接的下拉列表

以下是函数：

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

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

    });

});
</script>

HTML

CSS

换衣服

#arrow img:hover 

到

在您的案例中，选择器意味着在带有id箭头的标记中查找图像，但您需要使用id箭头查找标记

正如@somethinghere所说，你应该改变。单元格：悬停到。单元格：悬停。类名区分大小写，因此.cell！=。单元格

更改您的

#arrow img:hover 

到

在您的案例中，选择器意味着在带有id箭头的标记中查找图像，但您需要使用id箭头查找标记

正如@somethinghere所说，你应该改变。单元格：悬停到。单元格：悬停。类名区分大小写，因此.cell！=。单元格

尝试以下操作：

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

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

.

试试这个：

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

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

---

.

请检查以下代码：

HTML

---

请检查以下代码：

HTML

$.cell img.hover函数{ $this.addClasscfse_a； }，功能{ $this.removeClasscfse_a； }; $.cell img.hover函数{ $this.addClasscfse_a； }，功能{ $this.removeClasscfse_a；

---

};你不想使用jQuery？有一个输入错误。使用.Cell:hover和not.cel:hover这在css中是不可能的吗？实际上，完整的功能将是当移动悬停，然后箭头应该出现，点击箭头，一个下拉列表应该出现。我正在考虑为后面的部分添加jquery您不想使用jquery吗？有一个输入错误。使用.Cell:hover和not.cel:hover这在css中是不可能的吗？实际上，完整的功能将是当移动悬停，然后箭头应该出现，点击箭头，一个下拉列表应该出现。我想为后面的部分添加jquery，也就是添加它，但是他还需要将.cell改为.cell，因为他的代码并不匹配。答案是正确的。另外，只是添加它，但他还需要将.cell更改为.cell，因为他的代码并不匹配。回答正确。如果div被隐藏，我应该在哪里悬停？使用不透明度代替掌心：yes@VitorinoFernandes！这里的日子快结束了。。我变得模糊了！如果div是隐藏的，我应该在哪里悬停使用不透明代替掌心：yes@VitorinoFernandes！这里的日子快结束了。。我变得模糊了！删除img和之间的空白，因为您现在正在尝试在图像标记中查找带有id箭头的标记感谢您的详细说明。我使用了不透明度，效果很好：@DeepikaTyagi我很高兴能帮助你。删除img和之间的空白，因为你现在正试图在图像标签中找到带有id箭头的标签谢谢你的详细说明。我使用了不透明度，效果很好：@deepikatagi我很乐意帮助你。

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

img#arrow:hover {
    opacity: 1;
}

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

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

.image {
    opacity: 0;
}

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