在 JavaScript 悬停时显示/隐藏 div

Question

我希望仅在 div 悬停时显示图像叠加层（带有文本）。默认隐藏。如果合适，通过 JavaScript。

我尝试复制 css，给第一个（显示：无），然后是第二个，用 :hover 和 no（显示：无），但没有工作，所以尝试使用 JavaScript 添加/删除（显示：无） ) 类。

我添加了一个实时 URL。我指的是 6 张主页图片。

直播网址：http://bit.ly/1jl1QaT

HTML

<div class="desc"><p><?=((strlen($r_main['friendlyTitle'])>40)?substr($r_main['friendlyTitle'],0,40).'...':$r_main['friendlyTitle']);?></p></div>
                </div></a>
                <a href="Shopping/"><div class="feature-2">
                    <div class="header"><p>Shopping</p></div>
                    <div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
                </div></a>

CSS

#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 { position:absolute; width: 220px; height: 50px  zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px; display: none; }

#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-show { position:absolute; width: 220px; height: 50px     zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px;  }

JavaScript

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

Answer 1

HTML

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

JAVA 脚本

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

CSS

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

Fiddle link

Answer 2

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

请将以上 CSS 代码添加到您的网站中。因为一些潜水元素溢出了。这将解决这个问题。

Answer 3

试试this fiddle。我已经用过很多次了。

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

只需编辑此代码并放置您的 div 而不是按钮。

Answer 4

你的 CSS 是错误的。请使用这个工具http://csslisible.com/en/ 让它被人类阅读，你就会明白我所说的“错误”是什么意思：

#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 { 显示：无； 位置：绝对； 底部：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#: 这是这里 */ #content-mid .col-2 .features .feature-6 .desc-show { 位置：绝对； 底部：0； 宽度：220px； 高度：50px 缩放； 边距底部：5px； 不透明度：0.9； 背景：#333； 过滤器：阿尔法（不透明度= 90）； }

更简单的事情怎么样：

• 无需 JavaScript，
• 更少的 CSS 代码重复，

#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 { 显示：无； 位置：绝对； 底部：0； 宽度：220px； 高度：50px 缩放； 边距底部：5px； 不透明度：0.9； 背景：#333； 过滤器：阿尔法（不透明度= 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 { 显示：块； }

编辑：这是 JSFiddle 上的一个示例 http://jsfiddle.net/pomeh/9XX46/

代码：

HTML：

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

CSS：

.features .feature { 宽度：220px； 高度：50px 缩放； 边距底部：5px； 位置：相对； } p { 填充：0； 边距：0； } .features .feature .header { 宽度：100%； 文本转换：大写； 白颜色; 边距：0； } .features .feature-1 .header { 背景颜色：蓝色； } .features .feature-2 .header { 背景颜色：红色； } .features .feature-3 .header { 背景颜色：绿色； } .features .feature .desc { 显示：无； 不透明度：0.9； 背景：#333； 宽度：220px； 过滤器：阿尔法（不透明度= 90）； 边距：0； 填充：0； 位置：绝对； 底部：5px； } .features .feature:悬停 .desc { 显示：块； }