javascript - 超链接悬停时将 DIV 设置为可见 - CSS/HTML

Question

我附上了我的 HTML 片段。

如果我将鼠标悬停在 ID 为 li1link 的超链接上是否会显示 div#li1，如果我将鼠标悬停在 ID 为 li2link 的超链接上则显示 div#li2被展示。这很容易实现吗？

所以我想默认情况下 DIV 设置为 display:hidden 直到特定的相关链接悬停/激活。

确认一下，任何时候都只会显示一个 DIV。

这是我当前的 HTML:

    <ul>
        <li><a href="#li1" id=li1link">Test 1 - hover over to display ul#li1</a></li>
        <li><a href="#li2" id=li2link">Test 2 - hover over to display ul#li2</a></li>
    </ul>

    <div id="li1">
    <ul>
        <li>Content 1</li>
        <li>Content 1</li>
    </ul>
    </div>
    <div id="li2">
        <ul>
            <li>Content 2</li>
            <li>Content 2</li>
        </ul>
    </div>

我对使用 jQuery 或 CSS 持开放态度，只是不太确定如何解决这个问题。困惑是一种轻描淡写的说法。

非常感谢您对此的任何指点。

Answer 1

你可以试试:

// for all links that have link keyword in their ids
$('a[id*="link"]').mouseenter(function(){
  // get the div id out of this
  var id = this.id.replace('link', '');
  // hide all other divs
  $('div[id^="li"]').hide();
  // show the needed div now
  $('#' + id).show();
});

// hide when mouse moves away
$('a[id*="link"]').mouseout(function(){
  var id = this.id.replace('link', '');
  $('#' + id).hide();
});

To confirm, only one DIV will be visible at any time.

这些行负责:

$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();