3

我有两种相互独立工作的淡入淡出，但是一旦触发悬停淡入淡出，点击淡入淡出就会停止工作。这是我的代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js">
    /*window.onload = function(){alert("welcome");}*/
</script>

<style>
body {
    text-align:center
}

#container {
    width:660px;
    margin: 0 auto;
    border-width: 0 2px 2px 2px;
    border-style: solid;
    border-color:#CCCCCC;
    overflow:auto;
    padding: 0 5px 5px 5px;
}

div.mainSize {
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.verticalBox {
    width:100px;
    height:210px;
    padding:5px;
}

div.horizBox {
    width:210px;
    height:100px;
    padding:5px;
}

div.mainSizegreen {
    background-color:#006600;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.mainSizered {
    background-color:#FF0000;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
}

div.mainSizeblue {
    background-color:#0000FF;
    width:100px;
    height:100px;
    margin:5px;
    position:relative;
    float:left;
    /*opacity:0.2;
    filter:alpha(opacity=20);*/
}

div.navigation {
    text-align:center;
    width:500;
    margin-bottom:20px;
}

a.viewBlue{
    color:#000099;
}

a.viewGreen{
    color:#006600;
}

a.viewRed{
    color:#FF0000;
}

.Opac20 {
    filter:alpha(opacity=30);  // IE
    -moz-opacity:0.3;          // Firefox
    -khtml-opacity: 0.3;       
    opacity: 0.3; 
}
</style>

</head>

<body>
    <div id="container">
        <div class="navigation">
            <p><span class="viewBlue">View Blue</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="viewRed">View Red</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="viewGreen">View Green</span></p>
        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizered">        </div>
        <div class="mainSizegreen">        </div>
        <div class="mainSizeblue">        </div>
        <div class="mainSizered">        </div>

    </div>
<script>
$(document).ready(function(){



   $("span.viewBlue").click(function(){
     if($("div.mainSizered:first").hasClass("Opac20") && $("div.mainSizegreen:first").hasClass("Opac20")){
         $("div.mainSizered").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizeblue").addClass("Opac20");

         $("div.mainSizeblue").toggleClass("Opac20");
     } 
   });

   $("span.viewGreen").click(function(){
     if($("div.mainSizered:first").hasClass("Opac20") && $("div.mainSizeblue:first").hasClass("Opac20")){
         $("div.mainSizered").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizeblue").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizegreen").addClass("Opac20");
         $("div.mainSizeblue").stop(true, true).addClass("Opac20", 1000);

         $("div.mainSizegreen").toggleClass("Opac20");
     }
   });

   $("span.viewRed").click(function(){
     if($("div.mainSizeblue:first").hasClass("Opac20") && $("div.mainSizegreen:first").hasClass("Opac20")){
         $("div.mainSizeblue").stop(true, true).toggleClass("Opac20", 1000);
         $("div.mainSizegreen").stop(true, true).toggleClass("Opac20", 1000);

     }
     else{
         $("div.mainSizered").addClass("Opac20");
         $("div.mainSizegreen").stop(true, true).addClass("Opac20", 1000);
         $("div.mainSizeblue").stop(true, true).addClass("Opac20", 1000);

         $("div.mainSizered").toggleClass("Opac20");
     }
   });

   // THIS IS FOR HOVERING WITH TRANSITION A DIV  
   $("div.mainSizeblue").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "0.4"}, "slow");
     },
     function(){
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");

   });

   $("div.mainSizegreen").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");
     },
     function(){
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");

   });

   $("div.mainSizered").hover(
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "0.4"}, "slow");
         $("div.mainSizered").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "0.4"}, "slow");
     },
     function(){
         $("div.mainSizeblue").stop(true, true).animate({"opacity": "1"}, "slow");
         $("div.mainSizegreen").stop(true, true).animate({"opacity": "1"}, "slow");

   });




 });

</script>
</body>
</html>

如果您确保不将鼠标悬停在任何颜色方块上，则顶部的文本在您单击它时会起作用。如果您单击“查看蓝色”，它将使除蓝色以外的所有内容褪色至 30% 的不透明度。再次单击它，它会将所有内容淡化为 100% 不透明度。当您将鼠标悬停在彩色方块上时也会发生同样的情况，但是当您再次尝试使用该文本时，它将不起作用。

任何想法为什么会发生这种情况？

谢谢你的帮助！

4

1 回答 1

0

您的问题是您正在混合使用通过 CSS 类应用的规则并设置style您正在着色的 DOM 节点的属性。

你的悬停代码设置了阴影块，点击代码设置了一个有规则style: opacity的 CSS 类。opacity

当 CSS 规则和style属性同时存在时，style属性将具有更多的特异性并成为生效的属性。因此，一旦您将鼠标悬停在一个块上并style设置了属性，CSS 规则可以覆盖的唯一方法就是使用!important. 进行此更改会使您的演示工作。

.Opac20 {
    filter:alpha(opacity=30) !important;  // IE
    -moz-opacity:0.3 !important;          // Firefox
    -khtml-opacity: 0.3 !important;       
    opacity: 0.3 !important; 
}​

这里有一个活生生的例子 - http://jsfiddle.net/Ds6MF/2/。

话虽如此，使用!important不是一个好的做法，应尽可能避免。在这种情况下，您应该将您的应用程序切换为使用 CSS 类或style使用不透明度值设置属性，而不是两者兼而有之。

于 2012-05-12T11:17:05.093 回答