CODEWITHSUNDEEP
jqueryhtmlhoveropacity
rika
rika

Reputation: 3

Need help to hover opacity

I have two divs, one beside the other, and each has different contents. I want to when the mouse to stand on one, the other is transparent .. and vice versa. I am trying with the code below, but it does not work. Do I need to set the opacity in css divs too?

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

heres the 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>

Upvotes: 0

Views: 53

Answers (2)

Alex Char
Alex Char

Reputation: 33218

Try this:

$('#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

Upvotes: 0

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

You need to reset the opacity of the ones you are trying to show.

$('#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);
});

Upvotes: 1

Related Questions