Jquery悬停获取标题属性和显示分区
Jquery悬停获取标题属性和显示分区
提问于 2012-05-09 09:29:46
在修修补补了几个小时之后，我希望有人能对此发表一些见解。
我有两个并排的div。在右侧有一个包含div id=list的链接列表。在左侧有一个视图区域div，它将在悬停时显示链接的图片和描述。因此，当你将鼠标悬停在链接上时，它应该会在左侧显示一个特定于该div的div。但是，我想在此基础上添加一点自动化。
基本上将鼠标悬停在列表div中的链接上，将切换显示左侧div的显示块。将显示图片和描述的隐藏div id的名称与列表div中链接的title属性相同。因此，在悬停时，该链接将切换id等于title to display: block的div的显示。
所以基本上我的脚本逻辑是这样的：
将鼠标悬停在列表div中的链接上。获取此链接的标题属性。将div的id更改为上面获取的title属性(在#viewarea中)，以显示块。
因此，当鼠标悬停在猴子链接上时，它将采用“猴子”的标题，并在视图区域id=中切换div div“猴子”的可见性。
下面是粗略的html/css代码：
#list {
width: 480px;
float: right;
}
#viewarea {
width: 480px;
}
<div id="list">
<h1>
Animals
</h1>
<p>
<a href="monkeys_link" title="monkeys">Monkeys</a>
</p>
<p>
<a href=”kittens_link" title="kittens">Kittens</a>
</p>
<p>
<a href="pigs_link" title="pigs">Pigs</a>
</p>
</div>
<div id="viewarea">
<div id="monkeys" style="display: none;">
<img src="picture_of_monkeys.jpg"></img>
Summary text
</div>
<div id="kittens" style="display: none;">
<img src="picture_of_kittens.jpg"></img>
Summary text
</div>
<div id="pigs" style="display: none;">
<img src="picture_of_pigs.jpg"></img>
Summary text
</div>
</div>这就是我在外部jquery脚本中最终得到的结果。我知道我需要像.each这样的循环构造，但是我还没能让它工作。我在正确的轨道上吗？
$(document).ready(function() {
var title1 = $("#list a").attr("title");
$("#list a").hover(
function () {
$("#" + "title1").css("display", "block");
},
function () {
$("#" + "title1").css("display", "none");
}
);
});很抱歉写了这么长的帖子，非常感谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2012-05-09 09:54:15
$("#list")
// On mouseenter and mouseleave, we want to react
.on("mouseenter mouseleave", "a", function(e){
// Find the element whose id matches our current title
var el = $("#" + this.title);
// Determine if we're entering or exiting the link
switch ( e.type ) {
// Show the element or hide the element
case "mouseenter" : el.show(); break;
case "mouseleave" : el.hide();
}
});演示：http://jsbin.com/amitet/2/edit
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10508729
复制相关文章
相似问题
腾讯云开发者
