使用鼠标悬停来显示适用于链接的div [英] mouseover to display appropriated div for link
问题描述
我需要让每个div链接使相应的div文本出现在页面的底部。
<脚本我已经部分设置了它,但我想知道是否有更好的方法来加密这段代码。类型= 文本/ JavaScript的 >
$(function(){
$('#item1')。hover(
function(){
$('#Tile1')。fadeIn('fast') ;
},
function(){
$('#Tile1')。fadeOut('fast');
});
});
$('#item2')。hover(
function(){
$('#Tile2')。fadeIn() 'fast');
},
function(){
$('#Tile2')。fadeOut('fast');
});
} );
< / script>
< div class =four columns alpha>
< a href =solutions / mobile.phpid =item1>
< img src =images / 1.pngalt =class =tiles/>< / a>
< / div>
< div id =Tile1class =sixteen columnsstyle =display:none;>
< h3 class =center> GIS / Mapping< / h3>
< p>
Lorem ipsum dolor sit amet,consectetur adipiscing elit。 Maecenas id justo
< / p>
< / div>
Div并不是嵌套的,因为我希望文本始终显示在页面底部您将鼠标悬停在哪个链接上。 $(function(){...}
doesn 对每个函数都不需要重复,并且可以使用 fadeToggle()
等函数来减少代码量:
$(function(){
$(div [id ^ ='item'])。hover(function(){
var ('item','');
$(selector).fadeToggle('fast');
}选择器='#Tile'+ $(this).attr );
});
假设您的ID总是格式为:<$标题(N)。
第二行选择以
item
开头的所有元素,后面的行选择 item
后的ID并使用它选择适当的< div>
。
I need to have each div link make the appropriate div text to appear at the bottom of the page. I have it partially set up but I wanted to know if there was a better way to steam line this code.
<script type="text/javascript">
$(function () {
$('#item1').hover(
function () {
$('#Tile1').fadeIn( 'fast' );
},
function () {
$('#Tile1').fadeOut( 'fast' );
});
});
$(function () {
$('#item2').hover(
function () {
$('#Tile2').fadeIn( 'fast' );
},
function () {
$('#Tile2').fadeOut( 'fast' );
});
});
</script>
<div class="four columns alpha">
<a href="solutions/mobile.php" id="item1">
<img src="images/1.png" alt="" class="tiles" /></a>
</div>
<div id="Tile1" class=" sixteen columns" style="display: none;">
<h3 class="center">GIS / Mapping</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas id justo
</p>
</div>
The Divs are not nested because I want the text to always appear at the bottom of the page no matter which link you hover over.
The $(function(){ ... }
doesn't need to be repeated for each function, and you can use functions such as fadeToggle()
to reduce the amount of code:
$(function () {
$("div[id^='item']").hover(function(){
var selector = '#Tile' + $(this).attr('id').replace('item', '');
$(selector).fadeToggle('fast');
});
});
This assumes your IDs are always in the format: item(N)
maps to Title(N)
.
The second line selects all elements where the ID begins with item
and the line that follows selects the ID after item
and uses it to select the appropriate <div>
.
这篇关于使用鼠标悬停来显示适用于链接的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!