javascript - 在悬停动态时显示/隐藏 div

Question

目前我正在构建代码以在将鼠标悬停在某个 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(我的名字)。

Answer 1

不需要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>