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

我已经附加了我的HTML代码片段。当超链接悬停时将DIV设置为可见 - CSS/HTML

是否有可能，如果我将鼠标悬停在与ID li1link所显示DIV＃LI1的超级链接，如果我将鼠标悬停在超链接与ID li2link，则显示DIV＃LI2。这很容易实现吗？

所以我想默认是DIVs设置为显示：隐藏，直到该特定的相关链接悬停/活动。

要确认，只有一个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，我只是不完全知道如何处理这个问题。困惑是轻描淡写。

非常感谢任何与此指针。

来源

2012-02-24 michaelmcgurk

a-> href是否会与div ID相同？如果是的话，你可以使用单个函数来处理所有这些情况... http://jsfiddle.net/skram/dtEEQ/ – 2012-02-24 15:41:26

你可以尝试：

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

来源

2012-02-24 15:27:30 Sarfraz

感谢您的期待，Sarfraz :-)我现在就试试看。 – michaelmcgurk 2012-02-24 15:29:51

再次感谢。我应该设置我的div显示：隐藏在开始？ – michaelmcgurk 2012-02-24 15:33:12

@ mcgarriers：上面的代码假定它们最初是隐藏的，所以你可以继续做下去。 – Sarfraz 2012-02-24 15:34:13

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

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

你可以做类似的事情时，＃li2link和显示＃LI2和隐藏。

来源

2012-02-24 15:29:52 Ajai

谢谢Ajai。我会在一分钟内尝试一下。 – michaelmcgurk 2012-02-24 15:30:27

这不是一个好方法，如果他有50个链接和div，他将不得不为所有这些重复相同的代码。 – Sarfraz 2012-02-24 15:31:49

@Sarfraz：同意。我只是解决了这个问题..既然这个问题没有谈到通用解决方案，我没有解决它。 – Ajai 2012-02-24 15:34:07

试试这个：

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

来源

2012-02-24 15:33:21 Tom

谢谢，汤姆。我已经去过Safraz的答案。真的很感激你花时间。希望它能在未来帮助别人。干杯! – michaelmcgurk 2012-02-24 15:42:06

与未成年人的HTML变化（增加一个类你UL）你可以处理这一切在1个功能，

假设：的A-> 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(); 
});

来源

2012-02-24 15:34:06

谢谢你，SKS。我已经去过Safraz的回答了，但很快就会看到。感谢您花时间帮忙。 – michaelmcgurk 2012-02-24 15:42:35

你可以检查一下here

CSS：

#li1link, #li2link {   
    display: none; 
}

的jQuery：

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

来源

2012-02-24 15:34:36 DarkAjax

谢谢，darkajax。 – michaelmcgurk 2012-02-24 15:42:59

我发现有一类与风格的交易，然后添加和移除这些作品很适合我，所以：（请注意下面的代码将删除类未悬停时通过链接，我会推荐给链接明智的类名做选择的，而不是全部的标签，用相同的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'); 
});

来源

2012-02-24 15:41:08 marble

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

干杯！

来源

2012-02-24 15:46:56

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

回答

相关问题