Hey everyone, I have a design challenge where I need to change the color of a picture inside a box when the user hovers over it. I have four boxes like this and my goal is to make everything else fade out when a user hovers over a specific box. Anyone know how to achieve this effect using JavaScript or CSS?
<!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>