5

ボックス内の任意の部分にカーソルを合わせると、ボックスホバー（div）が不透明度0.7にフェードインして、ほとんどが黒になり、透明度がほとんどなくなるようにしようとしています。しかし、私がしたことは何も機能していません。また、ボックスが増えるので、IDを割り当てたくありません。

これが私が作ろうとしているコードです：http：//pastebin.com/3ZRcrx57

4

4 に答える 4

8

まず第一に、あなたの.box-hover要素は兄弟ではなく子であるため、機能しません. ornext()を使用する必要があります.find()children()

第二に、javascript を書くときは大文字と小文字が区別され、そのfadeInand 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() は動作しません use children と use $("document").read(function(...)};

于 2012-07-29T19:32:20.590 に答える