Home/ Questions/Q 8940205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T10:59:01+00:00

Hi guys not sure if this is java script or CSS but i got

  • 0

Hi guys not sure if this is java script or CSS but i got a picture inside a box and when the user hover over it it will change colour(Got 4 of these). My question is how do i get it so when the user dose hover over a box everything else fades out. 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="eng" lang="eng">
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<style type="text/css">
.meh1
{
    height: 200px; /*Specify Height*/
    width:  200px; /*Specify Width*/
    border: 3px solid blue; /*Add 1px solid border, use any color you want*/
    text-align:center; /*Align the text to the center*/
}

.meh1:hover
{
    border: 3px solid orange;
}   

.meh2
{
    height: 200px; /*Specify Height*/
    width:  200px; /*Specify Width*/
    border: 3px solid blue; /*Add 1px solid border, use any color you want*/
    text-align:center; /*Align the text to the center*/
}

.meh2:hover
{
    border: 3px solid orange;
}



</style>
<script type="text/javascript">
var $mehs = $('.meh');
$mehs.hover(function(){
$mehs.not(this).fadeTo(200, 0.25);
}, function(){
$mehs.fadeTo(200, 1);
});
 </script>

</head>
<body>

<div id="meh">

    <div class="meh1">
        <img src="cw3.jpg" alt="Name">
    </div>

    <div class="meh2">
        <img src="cw2.jpg" alt="Name">
    </div>
</div>





</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s javascript… The easiest method is using jQuery. (which, by your other questions, I see you are familiar with).

    Assuming all div’s have the class meh:

    var $mehs = $('.meh');
$mehs.hover(function(){
  $mehs.not(this).fadeTo(200, 0.25);
}, function(){
  $mehs.fadeTo(200, 1);
});

    I’ve used fadeTo(), as this will maintain your layout (fadeOut() will set the element to display:none; and affect your page layout)

    • 0