0

有两个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 的情况下解决。只有“this.parentNode”和“this”。

4

2 回答 2

0

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

首先删除内联样式，并附加一个 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

于 2013-01-14T21:37:48.143 回答
0

如果使用 '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>

于 2013-01-15T14:31:00.067 回答