admin管理员组文章数量:1417662
I have attached a snippet of my 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. 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.
To confirm, only one DIV will be visible at any time.
Here is my current 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. Confused is an understatement.
Many thanks for any pointers with this.
I have attached a snippet of my 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. 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.
To confirm, only one DIV will be visible at any time.
Here is my current 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. Confused is an understatement.
Many thanks for any pointers with this.
Share Improve this question asked Feb 24, 2012 at 15:24 michaelmcgurkmichaelmcgurk 6,53525 gold badges101 silver badges197 bronze badges 1- Is the a->href is going to be same as div ID? if yes, you can use single function to handle all such cases... jsfiddle/skram/dtEEQ – Selvakumar Arumugam Commented Feb 24, 2012 at 15:41
7 Answers
Reset to default 3You 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();
$("#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.
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>
You can check it here
CSS:
#li1link, #li2link {
display: none;
}
jQuery:
$("#li1, #li2").hover(
function () {
$('#' + $(this).attr('id') + 'link').show();
},
function () {
$('#' + $(this).attr('id') + 'link').hide();
});
With a minor html change (adding a class to your ul) you can handle it all in 1 function,
Assumption: The a->href value and the div ID are same.
DEMO
HTML Change:
<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();
});
I used jQuery, tried to give you a quick solution: http://jsfiddle/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!
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 remend giving the links sensible class names to do the selector on rather than all a tags, same with the divs)
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');
});
本文标签： javascriptSet DIV to visible when hyperlink hoverCSSHTMLStack Overflow
版权声明：本文标题：javascript - Set DIV to visible when hyperlink hover - CSSHTML - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745279480a2651355.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论