需要帮助悬停不透明度

Question

我有两个 div，一个并排，每个都有不同的内容。我想当鼠标站在一个上，另一个是透明的..反之亦然。我正在尝试使用下面的代码，但它不起作用。我是否也需要在 css div 中设置不透明度？

$('#id-escolha-right').mouseover(function(){
    $('#id-escolha-left').fadeTo( "slow", 0.3 );
});
$('#id-escolha-left').mouseover(function(){
    $('#id-escolha-right').fadeTo( "slow", 0.3 );
});

这里是html

    <div class="escolha-left" id="id-escolha-left">
    <a href="#" title="Porto Sol Beach" style="text-decoration:none;">
    <div class="box-beach-left">
            <h2>Porto Sol</h2>
            <h1>Beach</h1>
            <p>
                Um hotel à beira do mar, ideal para quem busca relaxar e aproveitar as belezas da ilha.<br>
            </p>
            <div class="prev-beach"></div>
        <img src="imgs/left-pessoas-escolha.png">
    </div>
    </a>
</div>  

<div class="escolha-right" id="id-escolha-right">
    <a href="#" title="Porto Sol Quality" style="text-decoration:none;">
    <div class="box-beach-right">
            <h2>Porto Sol</h2>
            <h1>Quality</h1>
            <p>
                Um business hotel do tamanho certo para eventos sociais e corporativos.<br>
            </p>
            <div class="next-quality"></div>
            </div>
        <img src="imgs/right-pessoas-escolha.png">
    </div>
    </a>
</div>

Answer 1

您需要重置您要显示的那些的不透明度。

$('#id-escolha-right').hover(function () {
    $(this).fadeTo("slow", 1);
    $('#id-escolha-left').fadeTo("slow", 0.3);
});
$('#id-escolha-left').mouseover(function () {
    $(this).fadeTo("slow", 1);
    $('#id-escolha-right').fadeTo("slow", 0.3);
});

Answer 2

试试这个：

$('#id-escolha-right').hover(function() { 
    $(this).next().stop().animate({"opacity": 0}); 
},function() { 
    $(this).next().stop().animate({"opacity": 1}); 
});

$('#id-escolha-left').hover(function() { 
    $(this).prev().stop().animate({"opacity": 0}); 
},function() { 
    $(this).prev().stop().animate({"opacity": 1}); 
});

fiddle