Home/ Questions/Q 8373783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T14:45:58+00:00

In my page I have severals divs. When the user hovers over 1 div

  • 0

In my page I have severals divs. When the user hovers over 1 div I want to fade out all other elements except the one the user is hovering over.
This works with the code below, however:
When the user moves fast with his mouse over all items, it appears as if the fading proces for each item is queued and even though the user is no longer moving his mouse, the fading out continues until the queue is empty.
To test, check my code below and move your mouse for example from the left to the right and notice the effect.

What I want to achieve is that the current item on which the user hovers has opacity of 1 while the others are then given 0.7.
How can I do this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
<style>
body{background-color:Red;}

.elementhighlight
{
    font-weight:bold !important;
    color:#FFF !important;
}

.elementhovered{background-color:#AE2460 !important;}

.element 
{
width:140px;
height:130px;
padding-left:4px;
padding-right:4px;
float:left;
cursor:pointer;
}


.element0{background-color:#FFF;}
.element1{background-color:#E6E4E0;}

.element .title,.element1 .title{
font: 12px Helvetica, verdana !important;    
text-align:center;
padding-top:4px;
padding-bottom:4px;
color:#666666;
}



</style>

</head>

<script language="javascript" type="text/javascript">

$(document).ready(function () {        
    $('.element').hover(function () {
        var curelement = $(this);            
        curelement.fadeTo(500, 1.0);
        curelement.addClass('elementhovered');

        curelement.stop().fadeTo(500, 1.0);
        $('.element').not('.elementhovered').stop().fadeTo(500, 0.7); 
        curelement.find('.title').addClass('elementhighlight');
    },
    function () {
        $('.element').fadeTo(300, 1.0);
        var curelement = $(this);
        curelement.removeClass('elementhovered');
        curelement.find('.title').removeClass('elementhighlight');
    });
});
</script>


<body>


<div class="element element0">
    <div class="title">Item</div>
</div>
<div class="element element1">
    <div class="title">Item</div>
</div>
<div class="element element0">
    <div class="title">Item</div>
</div>
<div class="element element1">
    <div class="title">Item</div>
</div>
<div class="element element0">
    <div class="title">Item</div>
</div>
<div class="element element1">
    <div class="title">Item</div>
</div>



</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add .stop() prevent the queue from building: 

    curelement.stop().fadeTo(500, 1.0);

$('.element').not('.elementhovered').stop()fadeTo(500, 0.7);
    • 0