Question

我一直试图让它成为当你将鼠标悬停在盒子中的任何部分时，盒子悬停（div）将淡化为不透明度0.7，这样它看起来大部分是黑色但很透明。但我所做的一切都在努力。而且我不想为它分配ID，因为会有更多的盒子。

由于

Answer 1

首先，您的.box-hover元素是孩子，而不是兄弟，因此next()无效，您必须使用find()或children()。< / p>

其次，编写javascript案例时很重要，其fadeIn和fadeOut（注意大写字母）

我认为这就是你要做的事情：

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

这是DEMONSTRATION

你甚至可以将其缩短为：

$(".box").on('mouseenter mouseleave', function () {
    $(this).find('.box-hover').fadeToggle(100);
});

DEMO

Answer 2

只为其不透明度设置动画，默认情况下将其设置为0.

$(".box").hover(function () {
   $(this).animate({'opacity':'0.7'}, 100);
},
function (){
   $(this).animate({'opacity':'0'}, 100);
});

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

Answer 4

<!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（...）};

在悬停jQuery上更改不透明度

4 个答案: