Question

我正在实施投票制度。

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

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

    $(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

使用CSS opacity: 0和opacity: 1更改可见性。当某些内容为opacity: 0时，它仍然可以触发鼠标悬停事件。

Answer 2

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

但是这个fadeTo方法会更改opacity的{{1}}以显示和隐藏它。

div

$(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") + '!');
                }
            });            
        });

我希望这可以帮助你!!!

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

2 个答案: