所以我有两个彩色图像,当悬停时会将另一个变为灰度(通过将不透明度更改为0,将每个图像的黑白副本直接放在后面)。这样可以正常工作。
我现在正试图在悬停的图像上显示一个标题(当它悬停时)。当我将鼠标悬停在图像上方时,标题显示就好了。如果鼠标在标题上方移动,则标题会不断消失并重新出现,因为我不再在图像本身上空盘旋。当标题消失后,我再次悬停在图像上,重新出现。
我想要发生的是,当我将鼠标悬停在这个标题上时,它表现得好像我还在徘徊在图像上。我也会接受永久性地在图像上显示标题作为替代方案(从长远来看,甚至可能更好)。
我调查了event.stopPropagation()方法,但这似乎阻止了向DOM移动的效果或其他类似的效果,而且这个标题是兄弟。
代码如下
HTML
<div id="leftbox">
<div id="upper" class="cap">
<div class="gallery">
<ul>
<li>
<a href="link.html">
<img src="images/img1_color.jpg" class="color" alt="a" id="img1>
</a>
</li>
<li>
<a href="link.html">
<img src="images/img1_dark.jpg" class="dark" alt="a">
</a>
</li>
</ul>
</div>
<div id="caption1">
</div>
</div>
<div id="lower" class="cap">
<div class="gallery">
<ul>
<li>
<a href="link2.html">
<img src="images/img2_color.jpg" class="color" alt="b" id="img2>
</a>
</li>
<li>
<a href="link2.html">
<img src="images/img2_dark.jpg" class="dark" alt="b">
</a>
</li>
</ul>
</div>
<div id="caption2">
</div>
</div>
</div>
CSS
.gallery li {
list-style-type: none;
position: relative;
}
img.dark {
position: absolute;
left: 0;
top: 0;
}
img.color {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#leftbox {
float: left;
width: 450px;
margin: 5px 10px 0px 0px;
}
#leftbox #upper {
width: 450px;
height: 250px;
margin: 0px 0px 10px 0px;
}
#leftbox #lower {
width: 450px;
height: 250px;
margin: 0px 0px 5px 0px;
}
.gallery #capimg1{
height: 20px;
text-align: center;
color: #ffffff;
background-color: green;
z-index:2;
display: none;
position: absolute;
padding: 5px 100px 5px 100px;
}
.gallery #capimg2{
height: 20px;
text-align: center;
color: #ffffff;
background-color: green;
z-index:2;
display: none;
position: absolute;
padding: 5px 100px 5px 100px;
}
的Javascript
window["img1"] = "#img1";
window["img2"] = "#img2";
$(document).ready(function(){
$('img.color').hover(function(ev) {
if (this.id == "img1") {
$(img2).stop().animate({"opacity": "0"}, 600);
}
else if (this.id == "img2") {
$(img1).stop().animate({"opacity": "0"}, 600);
}
$('#cap'+this.id).stop().fadeIn(400).html(this.alt);
},
function reAnim() {
$([img1, img2].join(",")).stop().animate({"opacity": "1"}, "slow");
$('#cap'+this.id).css("display", "none"); }
);
});
附带问题:有没有办法让#capimg1和#capimg2 divs与gallery div的宽度相同?如果不是,我只会为每个图像创建一个div并硬编码宽度。
感谢您的帮助
答案 0 :(得分:1)
更改您的javascript:
$(document).ready(function(){
$('img.color').parents('div.cap').hover(function(ev) {
if ($(this).find('img.color')[0].id == "img1") {
$(img2).stop().animate({"opacity": "0"}, 600);
}
else if (this.id == "img2") {
$(img1).stop().animate({"opacity": "0"}, 600);
}
$('#caption_'+$(this).find('img.color')[0].id).stop().fadeIn(400).html($(this).find('img.color')[0].alt);
},
function reAnim() {
$([img1, img2].join(",")).stop().animate({"opacity": "1"}, "slow");
$('#caption_'+$(this).find('img.color')[0].id).css("display", "none");
});
});
然后将HTML更改为:
<div id="upper" class="cap">
<div class="gallery">
<ul>
<li>
<a href="link.html">
<img src="images/img1_color.jpg" class="color" alt="a" id="img1>
</a>
</li>
<li>
<a href="link.html">
<img src="images/img1_dark.jpg" class="dark" alt="a">
</a>
</li>
</ul>
</div>
<div id="caption_img1">
</div>
</div>
以上编辑的重要部分是将标题的ID更改为我们可以轻松与img的ID关联的内容
这样做是将悬停效果放在图像本身,而不是容器上。因此,只要您的列表项悬停在上面,无论子项显示或显示的是什么,都将保持效果。
修改强>
几乎错过了你的问题。如果你想制作与你的画廊div相同的尺寸,你需要采用以下两种方式之一:
将图库下方的所有元素设置为宽度为100%
.gallery ul, .gallery li, .gallery a, .gallery img {
width: 100%;
}
使用jQuery设置width变量,如下所示:
$('.gallery img').width($('.gallery').width());
编辑2