Question

我试图在用户点击它时隐藏弹出窗口（实现为“ul”）。此弹出窗口仅在其父节点检测到鼠标时才可见：hover。

在我的onclick（）处理程序中，我在DOM元素上方的每个可想到的节点上调用blur（），我传递给我的onclick（）处理程序，并且它没有隐藏弹出窗口。

以下是代码：

 // the html....
 <ul class="ul_nestedPopups">
    <li><a href="#">Breakfast choices</a>
         <ul class="ul_nestedPopups"> 
            <li><a href="#" onclick="setBreakfast(this)">Apple</a></li>
            <li><a href="#" onclick="setBreakfast(this)">Orange</a></li>
            <li><a href="#" onclick="setBreakfast(this)">Banana</a></li>
        </ul>
    </li>
 </ul>


.ul_nestedPopups {
    display: inline-table;
}

 // I tried using visibility instead of display -- no real difference
.ul_nestedPopups ul {
/*visibility: hidden;*/
    display: none;
}

.ul_nestedPopups li:hover > ul {
    /*visibility: visible;*/
    /*visibility: visible !important;*/
    /*display: block !important;*/
     display: block;
 }


 // onclick handler......
 function setBreakfast(theNestedAnchor)
{
   // yes I experimented
   theNestedAnchor.blur();
   theNestedAnchor.parentNode.blur();
   theNestedAnchor.parentNode.parentNode.blur();
   theNestedAnchor.parentNode.parentNode.parentNode.blur();
   theNestedAnchor.parentNode.parentNode.parentNode.parentNode.blur();

   // NOW, DO SOMETHING WITH THE USER'S CHOSEN POPUP HERE...
   // ........some code.........
 }

目前的工作方式：当用户将鼠标悬停在“早餐选择”列表项上时，会显示包含三种早餐选择的列表（包含3个列表项的无序列表）。当用户点击3个早餐选择中的一个选择Apple，或Orange或Banana时 - 我已经验证了onclick（）处理程序被调用，但onblur（）调用那里什么也没做 - 3个早餐选择UL保持可见。

所以我猜测blur（）可能会被忽略，因为当用户在弹出窗口上单击鼠标时，鼠标仍然在盘旋，因此onclick处理程序尝试调用blur（）将被忽略。

所以我想过以这种方式构建onclick处理程序，但不认为它会起作用，我怀疑有更好/更简单的方法：

 // onclick handler......
 function setBreakfast(theNestedAnchor)
{
   1.  change the class to a different class that has no :hover selector
   2.  then call blur() to make the popup disappear
   3.  then change the class back to the original one with the :hover selector
       to re-enable the :hover behavior for next time
}

是否有更容易/更好的方法来显示弹出窗口：悬停 - 消失当用户点击它时？

Answer 1

悬停事件适用于您希望在鼠标悬停时发生某些事情，然后在鼠标移动时不发生的情况。如果我有这个错误，请纠正我，但你所描述的是在鼠标悬停时打开弹出窗口，然后在单击时关闭它。所以你不关心mouseout，所以你不想使用悬停。

我想你想要这个。见小提琴：http://jsfiddle.net/DLYwV/ 你可能想要重新设计以满足你的需求，但逻辑就在这里。

<强> HTML

<div id='hoverOver' onMouseOver='showPopup();'>Hover over me to open the popup</div>

<div id='popup'><br>I'm a popup.<br>Click
<a href=javascript:closePopup();>here</a>
to close.</div>

<强> JS

function showPopup()
{
 document.getElementById('popup').style.visibility='visible';    
}

function closePopup()
{
 document.getElementById('popup').style.visibility='hidden';    
}

<强> CSS

#hoverOver{

    display:inline-block;
    background:red;
}
#popup{
    visibility:hidden;
    position:absolute;
    top:0;
    background:white;
    height:200px;
    width:400px;
    border:2px solid black;
}

弹出窗口：悬停不能被模糊（）

1 个答案: