1

次の jQueryデモがあります: http://jsfiddle.net/FTERP/

現在、青いボックスにカーソルを合わせると、img内側のstevediv がフェードアウトします。

青いボックス (' john ') にカーソルを合わせると、赤い領域全体 (' container ') の不透明度が 0.4 に低下する可能性がありますが、青いボックスは 100% 青のままですか?

ここに私のHTMLがあります:

<div id="container">

    <div id="john" class="character normalClassName1">
        <a href="#" id="link1">&nbsp;</a>
    </div>  

    <div id="steve" class="character">
        <img src="http://placehold.it/400x400" />
    </div>

</div>

Javascript:

 $(function() {
    $('#john').mouseenter(function() {
        $(this).addClass('hoverClassName1');
        $('.character[id!=john]').css({opacity:0.5});

        var button = $(this).find('.button');

        button.html('View more');

    }).mouseleave(function () {
        $('.hoverClassName1').removeClass('hoverClassName1');
        $('.character').css({opacity:1});

        $('.button').html('View');
    });
});

CSS:

#container {width:100%;background:red;float:left;height:450px}

#john {position:relative;margin-top:-80px;margin-left:0px;background:blue;height:380px;float:left;width: 495px;}
#john div {margin-left:250px;width:180px;height:float:left;margin-top:205px}
#john div p {color:#074471;font-weight:bold;font-size:13px;margin-left:20px;}

#steve img {float:left}

#link1 {background:transparent;position:absolute;top:0px;left:0;width:100%;height:100%;z-index:1}

.normalClassName1 {width:495px!important;z-index:3;} 
.hoverClassName1 {width:495px;z-index:4!important}
4

3 に答える 3

2

不透明度は常にすべての子要素に影響します。

単色の背景色をフェードアウトするだけの場合は、rgba()またはhsla()のようなアルファ チャネルで色を使用できますが、次のようにします。

CSS

#container.test {
    background: rgba(255, 0, 0, 0.5); /* 0.5 = 50% transparency */
}

JavaScript

$(function() {
    $('#john').mouseenter(function() {
        $('#container').addClass("test");
    }).mouseleave(function () {
        $('#container').removeClass("test");
    });
});

http://jsfiddle.net/FTERP/2/

于 2013-04-30T13:38:16.453 に答える
1

あなたのmouseenter呼び出しで

$('#container').css({'opacity' : '.4'});

これを行うには、コンテナ div から他の 2 つの div を移動する必要があります。これは、すべての子に影響するためです。絶対に設定してから、他の 2 つの div をその上に移動できます。汚れていますが動作します。

于 2013-04-30T13:40:08.613 に答える
0

いいえ、子がコンテナの外に配置されていない限り、それは不可能です。オプション：

  1. 他の回答と同じように使用しrgba()ますが、正確に透明にするわけではありません。

  2. img を使用.pngし、ホバー中に透明なものに置き換えます。お気に入り：

    $('selector').hover(
   function () {
      $(this).parent().css("background-image", "url('transparent.png')");
   },
   function () {
      $(this).parent().css("background-image", "url('normal.png')");
   }
 );
于 2013-04-30T13:40:41.093 に答える