0

2つの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

'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 に答える
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 に答える