jquery上的动态隐藏，可见div事件

将鼠标悬停在主图像上时，图像将变灰，然后评级ui将可见。然后用户点击评分1到5的值。

我想显示当用户试图点击率，评级div（如明星）可见和隐藏。我动态地在div上隐藏了事件。但是一旦隐藏div，他们就不能采取我认为的鼠标悬停事件。我该怎么办？

$(document).ready(function() { 
 
    \t $(".innerDiv").hide(); 
 
    \t //$(".rating").hide(); 
 
    \t 
 
    \t $("#wrapperDiv").on({ 
 
    \t \t mouseover: function() { 
 
\t  \t \t $(".innerDiv").show(); 
 
    \t \t }, mouseout: function() { 
 
    \t \t \t $(".innerDiv").hide(); 
 
    \t \t } 
 
    \t }); 
 
    \t 
 
    \t $(".rating").on({ 
 
    \t \t mouseover: function() { 
 
    \t \t \t var index = $(this).attr("value"); 
 
    \t \t \t 
 
    \t \t \t var i = 0; 
 
    \t \t \t for(i=0; i<5; i++) { 
 
\t \t \t \t \t if(i<index) { 
 
    \t \t \t \t \t $($(".rating")[i]).css('visibility', 'visible') 
 
\t \t \t \t \t } else { 
 
    \t \t \t \t \t $($(".rating")[i]).css('visibility', 'hidden') 
 
\t \t \t \t \t }  \t \t \t \t 
 
    \t \t \t }  \t \t \t 
 
    \t \t }, click: function() { 
 
    \t \t \t alert('you voted rate ' + $(this).attr("value") + '!'); 
 
    \t \t } 
 
    \t }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapperDiv" style="cursor:pointer;width:200px;height:350px;border:1px solid;background:green;"> 
 
\t \t <div class="innerDiv" id="topInnerDiv" style="width:200px;height:20px;border:1px solid;background:yellow;"> 
 
\t \t \t <span>Main Topic Image</span> 
 
\t \t </div> 
 
\t \t <div class="innerDiv" id="mainInnerDiv" style="width:200px;height:210px;border:1px solid;background:green;"> 
 
\t \t \t <span>Grayed out Topic Image</span> 
 
\t \t </div> 
 
\t \t <div class="innerDiv" id="midInnerDiv" style="width:200px;height:20px;border:1px solid;background:blue;"> 
 
\t \t \t <span>rating by star</span> 
 
\t \t </div> 
 
\t \t <div class="innerDiv" id="bottomInnerDiv" style="width:200px;height:100px;border:1px solid;background:red;"> 
 
\t \t \t <div class="rating" value="1" id="rating1" style="border:0px;float:left;width:30px;height:50px;background:blue"> 
 
\t \t \t \t <span>1</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="rating" value="2" id="rating2" style="border:0px;float:left;width:30px;height:50px;background:black"> 
 
\t \t \t \t <span>2</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="rating" value="3" id="rating3" style="border:0px;float:left;width:30px;height:50px;background:pink"> 
 
\t \t \t \t <span>3</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="rating" value="4" id="rating4" style="border:0px;float:left;width:30px;height:50px;background:purple"> 
 
\t \t \t \t <span>4</span> 
 
\t \t \t </div> 
 
\t \t \t <div class="rating" value="5" id="rating5" style="border:0px;float:left;width:30px;height:50px;background:white"> 
 
\t \t \t \t <span>5</span> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

来源

2015-07-12 sbahn

使用fadeTo jQuery的方法而不是使用visibility属性。因为mouseover事件不会触发隐藏元素。

但是这个fadeTo方法将更改div的opacity以显示和隐藏它。

$(document).ready(function() { 
 
      $(".innerDiv").hide(); 
 
      //$(".rating").hide(); 
 

 
      $("#wrapperDiv").on({ 
 
       mouseover: function() { 
 
        $(".innerDiv").show(); 
 
        $(".rating").show(); 
 
       }, mouseout: function() { 
 
        $(".innerDiv").hide(); 
 
       } 
 
      }); 
 

 
      $(".rating").on({ 
 
       mouseover: function() { 
 
        var index = $(this).attr("value"); 
 

 
        var i = 0; 
 
        for (i = 0; i < 5; i++) { 
 
         if (i < index) { 
 
          $($(".rating")[i]).fadeTo(1, 1); 
 
         } else { 
 
          $($(".rating")[i]).fadeTo(1,0); 
 
         } 
 
        } 
 
       }, click: function() { 
 
        alert('you voted rate ' + $(this).attr("value") + '!'); 
 
       } 
 
      });    
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div id="wrapperDiv" style="cursor:pointer;width:200px;height:350px;border:1px solid;background:green;"> 
 
     <div class="innerDiv" id="topInnerDiv" style="width:200px;height:20px;border:1px solid;background:yellow;"> 
 
      <span>Main Topic Image</span> 
 
     </div> 
 
     <div class="innerDiv" id="mainInnerDiv" style="width:200px;height:210px;border:1px solid;background:green;"> 
 
      <span>Grayed out Topic Image</span> 
 
     </div> 
 
     <div class="innerDiv" id="midInnerDiv" style="width:200px;height:20px;border:1px solid;background:blue;"> 
 
      <span>rating by star</span> 
 
     </div> 
 
     <div class="innerDiv" id="bottomInnerDiv" style="width:200px;height:100px;border:1px solid;background:red;"> 
 
      <div class="rating" value="1" id="rating1" style="border:0px;float:left;width:30px;height:50px;background:blue"> 
 
       <span>1</span> 
 
      </div> 
 
      <div class="rating" value="2" id="rating2" style="border:0px;float:left;width:30px;height:50px;background:black"> 
 
       <span>2</span> 
 
      </div> 
 
      <div class="rating" value="3" id="rating3" style="border:0px;float:left;width:30px;height:50px;background:pink"> 
 
       <span>3</span> 
 
      </div> 
 
      <div class="rating" value="4" id="rating4" style="border:0px;float:left;width:30px;height:50px;background:purple"> 
 
       <span>4</span> 
 
      </div> 
 
      <div class="rating" value="5" id="rating5" style="border:0px;float:left;width:30px;height:50px;background:white"> 
 
       <span>5</span> 
 
      </div> 
 
     </div> 
 
    </div>

我希望这可以帮助你！

来源

2015-07-12 08:21:22

谢谢！我通过这种方式解决了问题。和很好的例子。 – sbahn

我很高兴我的帮助。 –

使用CSS opacity: 0和opacity: 1改变的知名度。当有东西是opacity: 0时，它仍然可以触发鼠标悬停事件。

来源

2015-07-12 05:58:19 alan0xd7

谢谢你的意见！ – sbahn

jquery上的动态隐藏，可见div事件

回答

相关问题