-1

大家好，不确定这是java脚本还是CSS，但我在一个盒子里有一张图片，当用户将鼠标悬停在它上面时，它会改变颜色（其中有4个）。我的问题是我如何得到它，所以当用户将鼠标悬停在一个盒子上时，其他所有东西都会淡出。

    <!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>
4

2 回答 2

2

它是 javascript... 最简单的方法是使用 jQuery。（根据你的其他问题，我看到你很熟悉）。

假设所有 div 都有类meh：

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

我使用过fadeTo()，因为这将保持您的布局（fadeOut()将元素设置为display:none;并影响您的页面布局）

于 2012-12-03T00:35:21.297 回答
0

像这样的东西：

$(document).ready(function() {
    $(".meh").on('mouseover', function(){
        $("Whatever it is that you want to fade").fadeOut('slow');
    });
});
于 2012-12-03T00:34:22.030 回答