當.hover已被應用時，請點擊屏蔽div。

我有一個元素，當徘徊的時候.show（）屏幕右側的div。該div有'display：none'默認情況下。當鼠標不再徘徊的元素，.hide（）執行：當.hover已被應用時，請點擊屏蔽div。

var gacHoverElement = ".gacPreviewPostContainer"; 
$(gacHoverElement).hover(function() { 
     var idx = $(this).index(gacHoverElement); 
     $("#gacHover" + idx).show(); 
    },function() { 
     var idx = $(this).index(gacHoverElement); 
     $("#gacHover" + idx).hide(); 
    });

代碼工作得很好，現在我想有一個。點擊（）函數，如果元素點擊，即使鼠標懸停在元素上，div也會粘在右側。我嘗試了一些沒有成功的事情。

任何想法？

實施例：

var gacHoverElement = ".gacPreviewPostContainer"; 
 
$(gacHoverElement).hover(function() { 
 
    \t var idx = $(gacHoverElement).index(gacHoverElement); 
 
    \t $("#gacHover" + idx).show(); 
 
    },function() { 
 
    \t var idx = $(gacHoverElement).index(gacHoverElement); 
 
    \t $("#gacHover" + idx).hide(); 
 
    });

.gacPreviewPostContainer {background-color: aqua;width: 50px;height: 50px;text-align: center;font-size: 10px;line-height: 45px;cursor: pointer;margin-bottom: 5px;} 
 
.gacHoverContainer {overflow: auto;display: none;background-color: #EEEEEE;height: 100%;width: 30%;position: fixed;top: 0;right: 0;z-index:2003;border-left: 6px solid #448aff;box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 10px;padding: 20px;} 
 
.gacHoverContainer {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gacPreviewPostContainer"><span>Preview</span></div> 
 
<div class="gacPreviewPostContainer"><span>Preview</span></div> 
 
<div class="gacPreviewPostContainer"><span>Preview</span></div> 
 
<div class="gacPreviewPostContainer"><span>Preview</span></div> 
 
<div id="gacHover0" class="gacHoverContainer"> 
 
<div id="gacHover1" class="gacHoverContainer"> 
 
<div id="gacHover2" class="gacHoverContainer"> 
 
<div id="gacHover3" class="gacHoverContainer">

來源

2016-07-27 SoMeGoD

cud你給小提琴所以我可以確認我的回答 – Iceman

代碼片段添加:) – SoMeGoD

作出編輯。看看：D – Iceman

WORKING WITH CLICK切換隱藏/顯示實施例：

var gacHoverElement = ".gacPreviewPostContainer"; 
 

 
var attachHover = function() { 
 
    console.log("attaching"); 
 
    $(gacHoverElement).hover(function() { 
 
    var idx = $(this).index(gacHoverElement); 
 
    $("#gacHover" + idx).show(); 
 
    }, function myhandler() { 
 
    var idx = $(this).index(gacHoverElement); 
 
    $("#gacHover" + idx).hide(); 
 
    }); 
 
} 
 
$(gacHoverElement).each(function() { 
 
    $(this).click(function() { 
 
    var ev = $._data(this, 'events'); 
 
    if (ev && ev.mouseover && ev.mouseout) { 
 
     $(gacHoverElement).unbind('mouseenter mouseleave') 
 
    } else { 
 
     attachHover(); 
 
    } 
 
    }) 
 
}) 
 
attachHover();

.gacPreviewPostContainer { 
 
    background-color: aqua; 
 
    width: 50px; 
 
    height: 50px; 
 
    text-align: center; 
 
    font-size: 10px; 
 
    line-height: 45px; 
 
    cursor: pointer; 
 
    margin-bottom: 5px; 
 
} 
 
.gacHoverContainer { 
 
    overflow: auto; 
 
    display: none; 
 
    background-color: #EEEEEE; 
 
    height: 100%; 
 
    width: 30%; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    z-index: 2003; 
 
    border-left: 6px solid #448aff; 
 
    box-shadow: rgba(0, 0, 0, 0.2) 0px -2px 10px; 
 
    padding: 20px; 
 
} 
 
.gacHoverContainer { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gacPreviewPostContainer"><span>Preview1</span> 
 
</div> 
 
<div class="gacPreviewPostContainer"><span>Preview2</span> 
 
</div> 
 
<div class="gacPreviewPostContainer"><span>Preview3</span> 
 
</div> 
 
<div class="gacPreviewPostContainer"><span>Preview4</span> 
 
</div> 
 
<div id="gacHover0" class="gacHoverContainer">11111111111111111111</div> 
 
<div id="gacHover1" class="gacHoverContainer">22222222222222222222</div> 
 
<div id="gacHover2" class="gacHoverContainer">33333333333333333333</div> 
 
<div id="gacHover3" class="gacHoverContainer">44444444444444444444</div>

來源

2016-07-27 20:02:23 Iceman

它的工作。非常感謝：D – SoMeGoD

當.hover已被應用時，請點擊屏蔽div。

回答

相關問題