-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 に答える