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

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

javascript jquery html css

Javascript 将DIV设置为在超链接悬停时可见-CSS/HTML,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我附上了我的HTML的一个片段如果我将鼠标悬停在ID为li1link的超链接上，是否可能显示divli1；如果我将鼠标悬停在ID为li2link的超链接上，是否可能显示divli2。这容易实现吗所以我猜默认设置是div被设置为display:hidden，直到特定的相关链接悬停在/active上为了确认，任何时候都只能看到一个DIV 以下是我当前的HTML： <ul> <li><a href="#li1" id=li1link">

我附上了我的HTML的一个片段

如果我将鼠标悬停在ID为li1link的超链接上，是否可能显示divli1；如果我将鼠标悬停在ID为li2link的超链接上，是否可能显示divli2。这容易实现吗

所以我猜默认设置是div被设置为display:hidden，直到特定的相关链接悬停在/active上

为了确认，任何时候都只能看到一个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持开放态度，只是不完全确定如何处理这个问题。困惑是一种轻描淡写的说法

非常感谢您的指点。

您可以尝试：

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

你可以试试：

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

当li2link和display li2并隐藏它时，也可以执行类似的操作

试试这个：

<!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>

试试这个：

<!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>

只需对html进行一点小小的更改，就可以在ul中添加一个类，您可以在1个函数中处理所有内容

假设：a->href值和div ID相同

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>

只需对html进行一点小小的更改，就可以在ul中添加一个类，您可以在1个函数中处理所有内容

假设：a->href值和div ID相同

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>

你可以查一下

CSS:

jQuery：

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

你可以查一下

CSS:

jQuery：

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

我发现有一个处理样式的类，然后添加和删除这些样式对我来说很好，所以：请注意，下面的代码将在不悬停在链接上时删除该类，我建议为链接提供合理的类名来进行选择器操作，而不是所有的a标记，与div相同

CSS:

JS:

CSS:

JS:

我使用jQuery，试图为您提供一个快速解决方案：

干杯

我使用jQuery，试图为您提供一个快速解决方案：

干杯

谢谢你看，萨弗雷斯：-我现在就试试。再次感谢。我是否应该将div设置为显示：在开始时隐藏？@mcgarries:上面的代码假设它们最初是隐藏的，所以您可以继续这样做。太棒了。它的99%工作。唯一的问题是，当我退出时，最后一个div仍然处于活动状态。我该如何解决这个问题？@mcgarriers-只是为了确保-它是display:none或visibility:hidden。可见性保持空间不显示内容显示隐藏所有内容，就像没有内容一样。感谢您的关注，Sarfraz:-我现在就试试。再次感谢。我是否应该将div设置为显示：在开始时隐藏？@mcgarries:上面的代码假设它们最初是隐藏的，所以您可以继续这样做。太棒了。它的99%工作。唯一的问题是，当我退出时，最后一个div仍然处于活动状态。我该如何解决这个问题？@mcgarriers-只是为了确保-它是display:none或visibility:hidden。可见性保持空间不显示内容显示隐藏一切，就像没有内容一样。谢谢，Ajai。我会在一分钟内尝试一下。这不是一个好方法，如果他有50个链接和div，他将不得不为所有这些重复相同的代码。@Sarfraz:同意。我只是在解决这个问题。。因为这个问题并没有讨论通用的解决方案，所以我没有解决它。悬停函数可以接受2个arg、mousein和mouseout处理程序。。为什么需要一个单独的函数。@SKS：是的，也可以。我认为这可以更清楚地理解。这个想法本身很简单。我只是想说清楚。。。这个答案没什么特别的…谢谢你，阿杰。我会在一分钟内尝试一下。这不是一个好方法，如果他有50个链接和div，他将不得不为所有这些重复相同的代码。@Sarfraz:同意。我只是在解决这个问题。。因为这个问题并没有讨论通用的解决方案，所以我没有解决它。悬停函数可以接受2个arg、mousein和mouseout处理程序。。为什么需要一个单独的函数。@SKS：是的，也可以。我认为这可以更清楚地理解。这个想法本身很简单。我只是想说清楚。。。这个答案没有什么特别的。a->href是否与div ID相同？如果是，您可以使用单个函数来处理所有此类情况。。。a->href是否与div ID相同？如果是，您可以使用单个函数来处理所有此类情况。。。谢谢你，汤姆。我同意上面萨夫拉兹的回答。非常感谢你抽出时间。希望将来它能帮助别人。干杯谢谢你，汤姆。我同意上面萨夫拉兹的回答。真的很感谢你

g时间。希望将来它能帮助别人。干杯谢谢你，斯克斯。我已经接受了萨夫拉兹上面的回答，但很快就会对此进行调查。谢谢你花时间帮忙。谢谢你，斯克斯。我已经接受了萨夫拉兹上面的回答，但很快就会对此进行调查。谢谢你花时间帮忙。

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