目前我正在构建代码以在将鼠标悬停在某个 div
上时显示文本。我能够制作这个,但它是静态的,我无法复制它。我想让它充满活力。我有一个功能可以识别您将鼠标悬停在哪张照片上并显示属于它的 div
。我试过的是如下所示:
HTML
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn</p>
<p class="member-function">developer</p>
</div>
</div>
CSS
.member-glenn {
display: none;
}
JQuery
$(".glenn").hover(function(){
$('.member-glenn').show();
},function(){
$('.member-glenn').hide();
});
我想用默认的 class/id 替换所有出现的 glenn(我的名字)。
最佳答案
不需要javascript!
//$(".glenn").hover(function(){
// $('.member-glenn').show();
//},function(){
// $('.member-glenn').hide();
//});
.member-glenn {
display: none;
}
.glenn:hover .member-glenn {
display: block
}
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn</p>
<p class="member-function">developer</p>
</div>
</div>
更多照片不变:
.member-glenn {
display: none;
}
.glenn:hover .member-glenn {
display: block
}
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 1</p>
<p class="member-function">developer 1</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 2</p>
<p class="member-function">developer 2</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 3</p>
<p class="member-function">developer 3</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 4</p>
<p class="member-function">developer 4</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 5</p>
<p class="member-function">developer 5</p>
</div>
</div>
现在也许它不应该跳来跳去,这是一个可以通过定位解决的定位问题
p {
margin: 0;
}
.glenn {
position: relative;
}
.member-glenn {
position: absolute;
top: 0;
left: 25px;
display: none;
}
.glenn:hover .member-glenn {
display: block
}
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 1</p>
<p class="member-function">developer 1</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 2</p>
<p class="member-function">developer 2</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 3</p>
<p class="member-function">developer 3</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 4</p>
<p class="member-function">developer 4</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 5</p>
<p class="member-function">developer 5</p>
</div>
</div>
现在你的老板可能会说:“哦,但它应该有淡入淡出的效果”仍然不需要 javascript
p {
margin: 0;
}
.glenn {
position: relative;
}
.member-glenn {
position: absolute;
top: 0;
left: 25px;
opacity: 0;
visibility: hidden;
transition: all 0.75s ease;
}
.glenn:hover .member-glenn {
visibility: visible;
opacity: 1;
}
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 1</p>
<p class="member-function">developer 1</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 2</p>
<p class="member-function">developer 2</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 3</p>
<p class="member-function">developer 3</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 4</p>
<p class="member-function">developer 4</p>
</div>
</div>
<div class="member-photo glenn">
<img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">
<div class="member-text member-glenn">
<p class="member-name">Glenn 5</p>
<p class="member-function">developer 5</p>
</div>
</div>
关于javascript - 在悬停动态时显示/隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42020157/