在鼠标悬停时显示图像答案

【问题标题】：display image on mousehover在鼠标悬停时显示图像
【发布时间】：2016-10-23 23:08:51
【问题描述】：

我有一个简单的表格，其中有 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>

【问题讨论】：

你不想使用 jQuery 吗？
有一个错字。使用.Cell:hover 而不是.cel:hover
这不能用 css 实现吗？实际上，完整的功能将是当移动悬停时，箭头应该出现，点击箭头时，应该出现一个下拉菜单。我正在考虑为后面的部分添加 jquery

标签： html css

【解决方案1】：

请检查以下代码：

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

【讨论】：

【解决方案2】：

改变你的

#arrow img:hover

到

#arrow:hover

在您的情况下，选择器的意思是“在带有 id 箭头的标签中查找图像”，但您需要“使用 id 箭头查找标签”

UPD 正如@somethinghere 所说，您应该将.cell:hover 更改为.Cell:hover。类名区分大小写，所以.cell != .Cell

【讨论】：

另外，只是添加它，但他还需要将.cell 更改为.Cell，因为他的代码并不真正匹配。正确答案。

【解决方案3】：

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

img#arrow:hover {
    opacity: 1;
}

【讨论】：

如果 div 被隐藏，我应该将鼠标悬停在哪里使用 opacity 代替
face-palm :) 是的@VitorinoFernandes ！它在这里结束一天..并且变得模糊！

【解决方案4】：

试试这个：

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

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

Demo Fiddle.

【讨论】：

删除 img 和 # 之间的空格，导致您现在正试图在图像标签中查找 ID 为“箭头”的标签
感谢您的详细说明。我使用了不透明度并且它起作用了:)
@DeepikaTyagi 很高兴为您提供帮助。

【解决方案5】：

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

试试这段代码，它会起作用并给出这个类的样式

【讨论】：