5

我一直在努力做到这一点，以便当您将鼠标悬停在框中的任何部分上时，框悬停（div）将淡入不透明度 0.7，使其看起来大部分是黑色但几乎不透明。但我所做的一切都不起作用。而且我不想用 ID 分配它，因为会有更多的盒子。

这是我正在尝试制作的代码：http: //pastebin.com/3ZRcrx57

4

4 回答 4

8

首先，您的.box-hover元素是子元素，而不是兄弟元素，因此next()不起作用，您将不得不使用find()or children()。

其次，在编写 javascript case 时确实很重要，并且它的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);
});​

演示

于 2012-07-29T19:24:39.387 回答
7

只是动画它的不透明度，默认设置为0。

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});​
于 2012-07-29T19:48:58.323 回答
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;
}
于 2012-07-29T19:32:48.690 回答
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() 将无法使用孩子并使用 $("document").ready(function(...)};

于 2012-07-29T19:32:20.590 回答