在JavaScript悬停时显示/隐藏div

我希望图像覆盖（带文本）仅在div悬停在上方时显示。默认情况下隐藏。如果合适，可以使用JavaScript

我尝试复制css，先给出第一个（display:none），然后给出第二个：hover和no（display:none），但没有成功，因此尝试使用JavaScript添加/删除（display:none）类

我已经包括了一个实时网址。我参考了6张主页图片

实时网址：

HTML

JavaScript

$(".desc").hover(
      function () {
        $(this).removeClass("desc-show");
      },
      function () {
        $(this).addClass("desc");
      }
    );

HTML

CSS

HTML

CSS

试试看。我已经用了很多次了

$(document).ready(function () {
                $(document).on('mouseenter', '.divbutton', function () {
                    $(this).find(":button").show();
                }).on('mouseleave', '.divbutton', function () {
                    $(this).find(":button").hide();
                });
            });

只需编辑此代码并将div替换为按钮。

试试。我已经用了很多次了

$(document).ready(function () {
                $(document).on('mouseenter', '.divbutton', function () {
                    $(this).find(":button").show();
                }).on('mouseleave', '.divbutton', function () {
                    $(this).find(":button").hide();
                });
            });

---

只需编辑此代码并将div替换为按钮。

您的CSS是错误的。请使用此工具使其可读，您将看到我所说的“错误”是什么意思：

#内容中间第2列特征特征第1列描述， #内容中间第2列特征特征第2列描述， #内容中间第2列特征第3列描述， #内容中间第2列特征第4列描述， #内容中间第2列特征第5列描述， #内容中间第2列特征第6列描述{ 显示：无； 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } #content mid.col-2.features.feature-1.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-2.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-3.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-4.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-5.desc，/*#TIP#：这里是*/ #内容中间。第2列。功能。功能6。描述显示{ 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } 那就简单点吧：

• 不需要JavaScript
• 减少CSS代码重复

#内容中间第2列特征特征第1列描述， #内容中间第2列特征特征第2列描述， #内容中间第2列特征第3列描述， #内容中间第2列特征第4列描述， #内容中间第2列特征第5列描述， #内容中间第2列特征第6列描述{ 显示：无； 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } #content mid.col-2.features.feature-1:hover.desc， #内容中间。第2列。功能。功能-2：悬停。说明， #内容中间第2列特征第3列：悬停描述， #内容中间。第2列。功能。功能4：悬停。说明， #内容中间第2列特征第5列：悬停描述， #内容中间。第2列。功能。功能6：悬停。描述{ 显示：块； }

编辑：下面是一个关于JSFIDLE的示例

守则：

HTML:

CSS:

.特色.特色{ 宽度：220px； 高度：50px变焦； 边缘底部：5px； 位置：相对位置； } p{ 填充：0； 保证金：0； } .features.feature.header{ 宽度：100%； 文本转换：大写； 颜色：白色； 保证金：0； } .特征.特征-1.标题{ 背景颜色：蓝色； } .特征.特征-2.标题{ 背景色：红色； } .特征.特征-3.标题{ 背景颜色：绿色； } .features.feature.desc{ 显示：无； 不透明度：0.9； 背景：#333； 宽度：220px； 过滤器：α（不透明度=90）； 保证金：0； 填充：0； 位置：绝对位置； 底部：5px； } .features.features:hover.desc{ 显示：块； }

---

你错了。请使用此工具使其可读，您将看到我所说的“错误”是什么意思：

#内容中间第2列特征特征第1列描述， #内容中间第2列特征特征第2列描述， #内容中间第2列特征第3列描述， #内容中间第2列特征第4列描述， #内容中间第2列特征第5列描述， #内容中间第2列特征第6列描述{ 显示：无； 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } #content mid.col-2.features.feature-1.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-2.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-3.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-4.desc，/*#TIP#：这里是*/ #content mid.col-2.features.feature-5.desc，/*#TIP#：这里是*/ #内容中间。第2列。功能。功能6。描述显示{ 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } 那就简单点吧：

• 不需要JavaScript
• 减少CSS代码重复

#内容中间第2列特征特征第1列描述， #内容中间第2列特征特征第2列描述， #内容中间第2列特征第3列描述， #内容中间第2列特征第4列描述， #内容中间第2列特征第5列描述， #内容中间第2列特征第6列描述{ 显示：无； 位置：绝对位置； 底部：0； 宽度：220px； 高度：50px变焦； 边缘底部：5px； 不透明度：0.9； 背景：#333； 过滤器：α（不透明度=90）； } #content mid.col-2.features.feature-1:hover.desc， #内容中间。第2列。功能。功能-2：悬停。说明， #内容中间第2列特征第3列：悬停描述， #内容中间。第2列。功能。功能4：悬停。说明， #内容中间第2列特征第5列：悬停描述， #内容中间。第2列。功能。功能6：悬停。描述{ 显示：块； }

电子数据交换

<div style="background-color:red;">
<div id="blah">DEMO TEXT ON MOUSE OVER</div>
</div>

$('#blah').hover(function() {
    $(this).fadeTo(1,1);
},function() {
    $(this).fadeTo(1,0);
});

#blah {
    width:100px;
    height:100px;
    background-color:green;
    visibility: visible;
    opacity:0;
    filter:alpha(opacity=0);
}

$(document).ready(function () {
                $(document).on('mouseenter', '.divbutton', function () {
                    $(this).find(":button").show();
                }).on('mouseleave', '.divbutton', function () {
                    $(this).find(":button").hide();
                });
            });

#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { display: none; position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); } #content-mid .col-2 .features .feature-1 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-2 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-3 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-4 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-5 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-6 .desc-show { position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); } #content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { display: none; position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); } #content-mid .col-2 .features .feature-1:hover .desc, #content-mid .col-2 .features .feature-2:hover .desc, #content-mid .col-2 .features .feature-3:hover .desc, #content-mid .col-2 .features .feature-4:hover .desc, #content-mid .col-2 .features .feature-5:hover .desc, #content-mid .col-2 .features .feature-6:hover .desc { display: block; }

<div class="features">

    <a href="Podcasts/">
        <div class="feature feature-1">
            <div class="header"><p>Podcasts</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/city" />
            </div>
            <div class="desc"><p>Podcast Simple Page</p></div>
        </div>
    </a>

    <a href="Shopping/">
        <div class="feature feature-2">
            <div class="header"><p>Shopping</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/food" />
            </div>
            <div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
        </div>
    </a>

    <a href="Confessions/">
        <div class="feature feature-3">
            <div class="header"><p>Confessions</p></div>
            <div class="image_holder_home_page">
                <img src="http://lorempixel.com/220/159/sports" />
            </div>
            <div class="desc"><p>tttttttttttttttt</p></div>
        </div>
    </a>

</div>

.features .feature { width: 220px; height: 50px zoom; margin-bottom: 5px; position: relative; } p { padding: 0; margin: 0; } .features .feature .header { width: 100%; text-transform: uppercase; color: white; margin: 0; } .features .feature-1 .header { background-color: blue; } .features .feature-2 .header { background-color: red; } .features .feature-3 .header { background-color: green; } .features .feature .desc { display: none; opacity: 0.9; background: #333; width: 220px; filter: alpha(opacity=90); margin: 0; padding: 0; position: absolute; bottom: 5px; } .features .feature:hover .desc { display: block; }

#content-mid .col-2 .features .feature-1{
    border: 1px solid #E5E5E5;
    float: left;
    height: 160px;
    overflow: hidden;
    padding: 5px;
    position: relative;
    width: 220px;
    z-index:-1;
}
#content-mid .col-2 .features .image_holder_home_page{
    height: 160px;
    overflow: hidden;
    position: relative;
    width: 220px;
}

#content-mid .col-2 .features .feature-1 .header{
    background: none repeat scroll 0 0 #0098FF;
    height: 30px;
    position: absolute;
    width: 95.5%;
}