将超链接悬停时将DIV设置为可见-CSS / HTML
[英]Set DIV to visible when hyperlink hover - CSS/HTML
问题描述
I have attached a snippet of my HTML. 
我已经附上了我的HTML片段。
Is it possible if I hover over the hyperlink with ID li1link that div#li1 is displayed, and if I hover over the hyperlink with ID li2link then div#li2 is displayed. 是否可以将鼠标悬停在ID为li1link的超链接上，并显示div＃ li1 ，如果将鼠标悬停在ID为li2link的超链接上，则可以显示div＃ li2 。 Is this easily achievable? 这容易实现吗？
So I guess the default is the DIVs are set to display:hidden until that particular related link is hovered over/active. 因此，我想默认值是将DIV设置为display：hidden，直到该特定相关链接悬停在/处于活动状态为止。
To confirm, only one DIV will be visible at any time . 为了确认， 任何时候都只能看到一个DIV 。
Here is my current HTML: 这是我当前的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>
I'm open to using jQuery or CSS, I'm just not totally sure how to approach this issue. 我愿意使用jQuery或CSS，但我不太确定如何解决此问题。 Confused is an understatement. 困惑是轻描淡写。
Many thanks for any pointers with this. 非常感谢您对此的任何指点。
7 个解决方案
解决方案1
3 已采纳 2012-02-24 15:27:30
You could try: 您可以尝试：
// 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.
These lines take care of that: 这些行负责：
$('div[id^="li"]').hide();
// show the needed div now
$('#' + id).show();
解决方案2
1 2012-02-24 15:29:52
$("#li1link).hover(function(){
$("#li1").attr('display','block');
});
$("#li1link).mouseover(function(){
$("#li").attr('display','none');
});
You can do similar thing when #li2link and display #li2 and hide it. ＃li2link并显示＃li2并将其隐藏时，您可以执行类似的操作。
解决方案3
1 2012-02-24 15:33:21
try this: 尝试这个：
<!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>
解决方案4
1 2012-02-24 15:34:06
With a minor html change (adding a class to your ul) you can handle it all in 1 function, 只需进行少量的html更改（将类添加到您的ul中），您就可以在1个函数中处理所有内容，
Assumption: The a->href value and the div ID are same. 假设： a-> href值和div ID相同。
HTML Change: 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: JS：
$('.showDivOnHover a').hover (function() {
$($(this).attr('href')).show();
}, function () {
$($(this).attr('href')).hide();
});
解决方案5
1 2012-02-24 15:34:36
解决方案6
1 2012-02-24 15:46:56
I used jQuery, tried to give you a quick solution: http://jsfiddle.net/88nKd/ 我使用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();
});
});
Cheers! 干杯!
解决方案7
0 2012-02-24 15:41:08
I find having a class which deals with the styles and then adding and removing those works well for me, so: (Please note the below code will remove the class when not hovering over the link and I would recommend giving the links sensible class names to do the selector on rather than all a tags, same with the divs) 我发现有一个处理样式的类，然后添加和删除这些样式对我来说效果很好，所以：（请注意，以下代码在不将链接悬停在链接上时会删除该类，因此我建议给链接提供合理的类名，以在选择器上而不是所有标签上进行选择，与div相同）
CSS: CSS：
div {
visibility:hidden; // Or display:none; or left: -999em; depending on what your page is there for.
}
div.show {
visibility: visible;
}
JS: JS：
$('a').hover(function() {
$($(this).attr('href')).addClass('show');
}, function() {
$($(this).attr('href')).removeClass('show');
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.