Question

我有两种类型的淡入淡出，它们彼此独立地工作，但是一旦触发悬停淡入淡出，点击淡入淡出就会停止工作。这是我的代码：

<!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％不透明度。当您将鼠标悬停在彩色方块上时会发生同样的情况，但是当您尝试再次使用该文本时，它将无法正常工作。

为什么会发生这种情况？

感谢您的帮助！

Answer 1

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

您的悬停代码设置着色块的style: opacity，点击代码设置具有opacity规则的CSS类。

当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属性，而不是两者。

jQuery UI结合了单击淡入淡出和悬停淡入淡出不能一起使用

1 个答案: