显示/隐藏动态悬停的div

本文介绍了显示/隐藏动态悬停的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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！