Question

有两个div

<div style="height:150px; overflow:hidden; overflow-y:hidden;">
    <div style="margin:5px; margin-right:25px;" onmouseover="this.style.width=(this.parentNode.offsetWidth-30)+\'px\'; this.parentNode.style.overflowY=\'auto\';" onmouseout="this.style.width=\'\'; this.parentNode.style.overflowY=\'hidden\';">';
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    123<br>
    </div>
 </div>

当鼠标悬停时，会出现垂直滚动条（当鼠标输出时 - 消失）。问题是，这个设计现在不起作用，因为滚动器在我可以到达滚动之前就会消失。是否可以使用鼠标点击滚动条并向上/向下移动滚动条的滑块来实现这一点？

重要的是，应该在没有任何ID的情况下解决此任务。＆＃39; this.parentNode＆＃39;和＆＃39;这个＆＃39;仅

Answer 1

问题是，在mouseover事件中，您通过父偏移量减去内部div的宽度 - 30.这意味着mouseout事件将始终在您到达滚动条之前触发。你提到应该在不使用ID的情况下解决任务，但这可以通过CSS使用类和：hover伪类轻松解决。

首先删除内联样式，然后附加CSS类

<div class="scrollable-on-hover">
    <div> ...

CSS：

.scrollable-on-hover {
  height: 150px;
  overflow: hidden;
}

.scrollable-on-hover:hover {
  overflow-y: auto;
}

CSS修复：http://jsfiddle.net/NaKKk/1/

如果你被迫使用内联javascript来解决这个问题，你应该可以使用这个来解决这个问题;

<div style="height: 150px; overflow: hidden;" onmouseover="this.style.overflowY = 'auto';" onmouseout="this.style.overflowY = 'hidden';">
    <div> ...

JS修复：http://jsfiddle.net/NaKKk/2/

在javascript示例中，您会注意到我将mouseover和mouseout事件附加到父元素而不是子元素上。我可以这样做，因为这些事件会从子元素和它的祖先树中冒出来。以下是对事件冒泡的简单引用：http://www.javascripter.net/faq/eventbubbling.htm

Answer 2

如果使用'firstChild'，则工作正常=）

<div style="height:150px; overflow:hidden; overflow-y:hidden;" onmouseover="this.firstChild.style.width=(this.offsetWidth-30)+'px'; this.style.overflowY='auto';" onmouseout="this.firstChild.style.width=''; this.style.overflowY='hidden';">
<div style="margin:5px; margin-right:25px;">';
123<br>
123<br>
123<br>
123<br>
123<br>
123<br>
</div>

自动滚动（css的溢出启用）效果的一个小难题

2 个答案: