logo标签列表

悬停时更改jQuery的不透明度

htmljqueryjquery-eventsopacityfadein
5
我一直在尝试让鼠标悬停在盒子的任何部分时，盒子悬停（div）会淡入到0.7的不透明度，以便它看起来大部分是黑色但略带透明。但是我所做的一切都没有效果。而且我不想给它分配ID，因为还会有更多的盒子。
这是我正在尝试制作的代码：http://pastebin.com/3ZRcrx57
你想在 jsFiddle 上创建一个可用的示例吗？ - j08691
4个回答
8

首先，您的.box-hover元素是一个子级，不是兄弟级，因此next()不能使用，您需要使用find()或children()。

其次，在编写javascript时大小写很重要，正确写法应该是fadeIn和fadeOut（注意大写字母）。

我认为这就是您想要做的：

$(".box").hover(function () {
    $(this).find('.box-hover').fadeIn(100);
},
function () {
    $(this).find('.box-hover').fadeOut(100);
});​

这里有一个演示。
甚至可以缩短为：
$(".box").on('mouseenter mouseleave', function () {
    $(this).find('.box-hover').fadeToggle(100);
});​

DEMO

7

只需对其透明度进行动画处理，默认将其设置为0。

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});​
3
使用纯CSS解决方案如何？
.box-hover {
    background-color: black;
    position: absolute;
    width: 290px;
    height: 185px;
    margin: 5px 5px 0 5px;
    display: none;
    opacity: 0;


    -webkit-transition: opacity 0.1s; /* Safari and Chrome */
       -moz-transition: opacity 0.1s; /* Firefox 4 */
        -ms-transition: opacity 0.1s; /* MSIE */
         -o-transition: opacity 0.1s; /* Opera */
            transition: opacity 0.1s;
}

.box:hover .box-hover {
    display: block;
    opacity: 0.7;
}
2
<!DOCTYPE html>
<html>
        <head>
                <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
                <style type="text/css">
                        body{
                                font-family: 'Open Sans',arial,sans-serif;
                        }
                        .box{
                                width: 300px;
                                min-height: 200px;
                                background-color: #ECECEC;
                                border: 1px solid #C6C6C6;
                                border-radius: 3px;
                                text-align: left;
                                position: relative;
                        }
                        .box-hover{
                                background-color: black;
                                position: absolute;
                                width: 290px;
                                height: 185px;
                                margin: 5px 5px 0 5px;
                                top: 0; 
                                left: 0;
                                display: none;
                                opacity: 0.7;
                        }
                        .box-image{
                                margin: 5px 5px 0 5px;
                        }
                        .box-image img{
                                width: 290px;
                                height: 185px;
                        }
                        .box-text{
                                padding: 5px;
                                font-size: 13px;
                                font-weight: bold;
                                color: #262626;
                                height: 30px;
                        }
                        .box-text span{
                                font-size: 10px;
                                font-weight: normal;
                        }
                </style>
                <script type="text/javascript">
                $("document").ready(function(){
                $(".box").hover(
                        function () {
                                $(this).children('.box-hover').fadeIn(100);
                        },
                function () {
                                $(this).children('.box-hover').fadeOut(100);
                        }
                );
                });
                </script>
        </head>
        <body>
                <div class="box">
                        <div class="box-hover"></div>
                        <div class="box-image"><img src="https://lh5.googleusercontent.com/mqHWHd2jm2141eD4SWowcIss1FwGmdZm3f0DxO0HCxYyWepZn8YyIKrMyrYKBlmGYU6zjiV-UQ=s460-h340-e365"></div>
                        <div class="box-text">Theme 2.0 <br><span>Created by: <em>User</em></span></div>
                </div>
        </body>
</html>

以下是可用的代码。next()方法无法使用，改用children()方法。同时在$("document").ready(function(...)};中加入代码：

你的回答非常有帮助，因为我也记起来自己忘了 document.ready 函数了！ - Alex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接