JQuery 将鼠标悬停在相应的 li 上时更改 class 跨度
JQuery Change class of a span on hover over respective li
我是新手 Jquery 下面的功能不起作用,我想做的是类似于悬停图像缩略图来显示预览。
我有一组 class 的 li,例如 "onelink" 和一组 spans "one" 等。
在各个 li 的悬停上想要切换具有相同名称
的跨度 class
function displaydesc(id) {
id = id.replace('link', '');
$("#" + id).toggleClass("vis");
}
$(".list>ul>li").hover(
function() {
displaydesc($(this).attr("id"));
});
.description span {
position: absolute;
display: none;
}
.vis {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list">
<ul>
<li id="onelink">one</li>
<li id="twolink">two</li>
<li id="threelink">three</li>
<li id="fourlink">four</li>
</ul>
</div>
<div class="description">
<span id="one">Lorem ipsum dolor.</span>
<span id="two">Tempore tenetur, doloribus.</span>
<span id="three">Culpa, fuga adipisci.</span>
<span id="four">Commodi, quisquam, quaerat!</span>
</div>
在您的 jQuery 中,使用 .list
而不是 .heading
,因为它链接到其他内容。
所以应该是:
$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});
这是jsFiddle
使用 .list 而不是 .Heading
function displaydesc(id){
id=id.replace('link','');
$("#"+id).toggleClass("vis");
}
$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});
.description span{
position: absolute;
display: none;
}
.vis{
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="list">
<ul>
<li id="onelink">one</li>
<li id="twolink">two</li>
<li id="threelink">three</li>
<li id="fourlink">four</li>
</ul>
</div>
<div class="description">
<span id="one">Lorem ipsum dolor.</span>
<span id="two">Tempore tenetur, doloribus.</span>
<span id="three">Culpa, fuga adipisci.</span>
<span id="four">Commodi, quisquam, quaerat!</span>
</div>
我是新手 Jquery 下面的功能不起作用,我想做的是类似于悬停图像缩略图来显示预览。
我有一组 class 的 li,例如 "onelink" 和一组 spans "one" 等。 在各个 li 的悬停上想要切换具有相同名称
的跨度 classfunction displaydesc(id) {
id = id.replace('link', '');
$("#" + id).toggleClass("vis");
}
$(".list>ul>li").hover(
function() {
displaydesc($(this).attr("id"));
});
.description span {
position: absolute;
display: none;
}
.vis {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list">
<ul>
<li id="onelink">one</li>
<li id="twolink">two</li>
<li id="threelink">three</li>
<li id="fourlink">four</li>
</ul>
</div>
<div class="description">
<span id="one">Lorem ipsum dolor.</span>
<span id="two">Tempore tenetur, doloribus.</span>
<span id="three">Culpa, fuga adipisci.</span>
<span id="four">Commodi, quisquam, quaerat!</span>
</div>
在您的 jQuery 中,使用 .list
而不是 .heading
,因为它链接到其他内容。
所以应该是:
$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});
这是jsFiddle
使用 .list 而不是 .Heading
function displaydesc(id){
id=id.replace('link','');
$("#"+id).toggleClass("vis");
}
$(".list>ul>li").hover(
function(){
displaydesc($(this).attr("id"));
});
.description span{
position: absolute;
display: none;
}
.vis{
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="list">
<ul>
<li id="onelink">one</li>
<li id="twolink">two</li>
<li id="threelink">three</li>
<li id="fourlink">four</li>
</ul>
</div>
<div class="description">
<span id="one">Lorem ipsum dolor.</span>
<span id="two">Tempore tenetur, doloribus.</span>
<span id="three">Culpa, fuga adipisci.</span>
<span id="four">Commodi, quisquam, quaerat!</span>
</div>