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();
});

要确认，任何时候都只能看到一个DIV。

这些行解决了这个问题：

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

Answer 2

$("#li1link).hover(function(){
   $("#li1").attr('display','block');
});

$("#li1link).mouseover(function(){
   $("#li").attr('display','none');
});

你可以在＃li2link做同样的事情并显示＃li2并隐藏它。

Answer 3

试试这个：

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onmouseover: function(link) {
                document.getElementById(link.id.substring(0, 3)).style.display = "block";
                 },
                onmouseout: function(link) {
                document.getElementById(link.id.substring(0, 3)).style.display = "none";
                }
            };
        </script>
    </head>
    <body>
        <ul>
            <li><a href="#li1" id=li1link" onmouseover="p.onmouseover(this)" onmouseout="p.onmouseout(this)">Test 1 - hover over to display ul#li1</a></li>
            <li><a href="#li2" id=li2link" onmouseover="p.onmouseover(this)" onmouseout="p.onmouseout(this)">Test 2 - hover over to display ul#li2</a></li>
        </ul>
        <div id="li1" style="display: none;">
            <ul>
                <li>Content 1</li>
                <li>Content 1</li>
            </ul>
        </div>
        <div id="li2" style="display: none;">
            <ul>
                <li>Content 2</li>
                <li>Content 2</li>
            </ul>
        </div>
    </body>
</html>

Answer 4

通过一个小的html更改（在ul中添加一个类），你可以在1个函数中处理它，

假设： a-＆gt; href值和div ID相同。

DEMO

HTML更改：

<ul class="showDivOnHover">
    <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>

JS：

 $('.showDivOnHover a').hover (function() {
    $($(this).attr('href')).show();
 }, function () {
    $($(this).attr('href')).hide();
 });

Answer 5

您可以查看here

CSS：

#li1link, #li2link {        
    display: none;
}

jQuery的：

$("#li1, #li2").hover(
    function () {
        $('#' + $(this).attr('id') + 'link').show();
    },
    function () {
        $('#' + $(this).attr('id') + 'link').hide();
    });

Answer 6

我使用jQuery，试图给你一个快速的解决方案： http://jsfiddle.net/88nKd/

<ul id="nav">
    <li><a href="#" id="1" class="liLink">Test 1 - hover over to display ul#li1</a></li>
    <li><a href="#" id="2" class="liLink">Test 2 - hover over to display ul#li2</a></li>
</ul>
<div id="li1" class="none">
    <ul>
        <li>Content 1</li>
        <li>Content 1</li>
    </ul>
</div>
<div id="li2" class="none">
    <ul>
        <li>Content 2</li>
        <li>Content 2</li>
    </ul>
</div>
css:
.none{
    display:none;
}
js:
$(document).ready(function(){
    $(".liLink").mouseover(function(){
        var linkNumber = $(this).attr('id');
        var divNumber = '#li'+linkNumber;
        $(divNumber).show();
    }).mouseout(function(){
        var linkNumber = $(this).attr('id');
        var divNumber = '#li'+linkNumber;
        $(divNumber).hide();
    });
});

干杯！

Answer 7

我找到了一个处理样式的类，然后为我添加和删除这些作品，所以：（请注意下面的代码将在没有悬停在链接上时删除该类，我建议给出链接合理的类名来执行选择器而不是所有标记，与div相同）

CSS：

div {
    visibility:hidden; // Or display:none; or left: -999em; depending on what your page is there for.
}
div.show {
    visibility: visible;
}

JS：

$('a').hover(function() {
  $($(this).attr('href')).addClass('show');
  }, function() {
  $($(this).attr('href')).removeClass('show');
});

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

7 个答案: