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

Question

我正在实施投票​​系统。

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

我想在用户尝试点击率时显示，评级 div（如星星）可见和隐藏。 我动态地在 div 上制作了隐藏事件。但是一旦 div 隐藏，我认为他们不能接受 mouseover 事件。我该怎么办？

    $(document).ready(function() {
    	$(".innerDiv").hide();
    	//$(".rating").hide();
    	
    	$("#wrapperDiv").on({
    		mouseover: function() {
	    		$(".innerDiv").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]).css('visibility', 'visible')
					} else {
    					$($(".rating")[i]).css('visibility', 'hidden')
					}    				
    			}    			
    		}, click: function() {
    			alert('you voted rate ' + $(this).attr("value") + '!');
    		}
    	});
    });

<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;">
		<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>

Answer 1

使用 jQuery 的 fadeTo 方法而不是使用 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>

希望对你有帮助！！！

Answer 2

使用 CSS opacity: 0 和 opacity: 1 更改可见性。当某个东西是opacity: 0 时，它仍然可以触发鼠标悬停事件。