显示/隐藏动态悬停的div [英] Show/hide divs on hover dynamic
本文介绍了显示/隐藏动态悬停的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我将鼠标悬停在某个 div 上时，我正在构建代码以显示文本。我能够产生这个，但它是静态的，我不能再现它。我想使它动态。我有一个函数可以识别你正在悬停的照片并显示属于它的 div 。我试过的是如下所示：
HTML
< div class =member-photo glenn>
< img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive>
< div class =member-text member-glenn>
< p class =member-name> Glenn< / p>
< p class =member-function>开发者< / p>
< / div>
< / div>
CSS
.member-glenn {
display：none;
}
JQuery
$（。glenn）。hover（function（）{
$（'。member-glenn' ）.show（）;
}，function（）{
$（'。member-glenn'）。hide（）;
}）;
我想要取代所有出现的 glenn （我的名字），默认为 class / id 。
解决方案
b
$ b
// $（。glenn）。hover（function（）{// $（ '.member-glenn'）。show（）; //}，function（）{// $（'。member-glenn'）。hide（）; //}）;
块}
< div class =member-photo glenn > < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn< / p> < p class =member-function>开发人员< / p> < / DIV> < / div>
p>
.member-glenn {display：none;}。glenn ：hover .member-glenn {display：block}
< ; div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 1< / p> < p class =member-function>开发人员1< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 2< / p> < p class =member-function>开发人员2< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 3< / p> < p class =member-function>开发人员3< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 4< / p> < p class =member-function>开发人员4< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 5< / p> < p class =member-function>开发人员5< / p> < / DIV> < / div>
现在也许它不应该跳跃arround这是一个定位问题，可以通过定位来固定
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.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 1< / p> < p class =member-function>开发人员1< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 2< / p> < p class =member-function>开发人员2< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 3< / p> < p class =member-function>开发人员3< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 4< / p> < p class =member-function>开发人员4< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 5< / p> < p class =member-function>开发人员5< / p> < / DIV> < / div>
现在你的老板可能会说：但它应该有一个淡入淡出的效果仍然不需要javascript
p {margin：0;}。glenn {position：relative;}。member-glenn {position：absolute; top：0; left：25px;不透明度：0;知名度：隐藏;过渡：全部0.75s缓解;}。glenn：hover .member-glenn {visibility：visible; opacity：1;}
< div class =member -photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 1< / p> < p class =member-function>开发人员1< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 2< / p> < p class =member-function>开发人员2< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 3< / p> < p class =member-function>开发人员3< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 4< / p> < p class =member-function>开发人员4< / p> < / DIV> < / DIV> < div class =member-photo glenn> < img src =images / retouched / glenn-round-transparant-not.pngclass =img-responsive> < div class =member-text member-glenn> < p class =member-name> Glenn 5< / p> < p class =member-function>开发人员5< / p> < / DIV> < / div>
On the moment I am building code to show text when I hover on a certain div. I am able to produce this, but it's static and I can't reproduce it. I would like to make it dynamic. I have a single function that recognizes which photo you are hovering over and shows the div that belongs to it. What I've tried is as shown below:
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();
});
What I would like is to replace all occurrences of glenn (my name) with a default of class/id.
解决方案
No javascript needed!
//$(".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>
For more photos no change:
.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>
Now maybe it shouldn't be jumping arround which is a positoning issue which can be fixed with positioning
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>
Now your boss might says: "Oh but it should have a fade effect" still no javascript needed
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>
这篇关于显示/隐藏动态悬停的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
