Show/hide divs on hover dynamic

Question

1.14M viewsSeptember 10, 2022css html javascript jquery

2

Giesburts September 7, 2022 0 Comments

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.

4 Answers

score 3 · Answer 1 · 2022-09-07T11:12:43+00:00

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>

score -1 · Answer 2 · 2022-09-07T10:43:37+00:00

Try this.

$(this).hover(function(){
    $('.member-text').show();
},function(){
    $('.member-text').hide();
});

score 2 · Answer 3 · 2022-09-07T09:58:20+00:00

User Jquery Mouse events

$(function() {
  $('#hover_Id').mouseover(function() {
       $('#effect').removeClass('member-glenn');
    });
  $('#hover_Id').mouseout(function() {
       $('#effect').addClass('member-glenn');
    });
});

.member-glenn {
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="member-photo glenn" id="hover_Id">
        <img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">

  <div class="member-text member-glenn" id="effect">
            <p class="member-name">Glenn</p>
            <p class="member-function">developer</p>
        </div>
    </div>

score 2 · Answer 4 · 2022-09-07T08:29:44+00:00

Here is a working example if your having more than 1 person on your page at once.

$(".member-photo").hover(function() {
  var value = $(this).data("value");
  $('.member[data-value="'+value+'"]').show();
}, function() {
  var value = $(this).data("value");
  $('.member[data-value="'+value+'"]').hide();
});

.member-text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="member-photo" data-value="glenn">
  <img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">

  <div class="member-text member" data-value="glenn">
    <p class="member-name">Glenn</p>
    <p class="member-function">developer</p>
  </div>
</div>
<br>
<div class="member-photo" data-value="Nick">
  <img src="images/retouched/glenn-round-transparant-not.png" class="img-responsive">

  <div class="member-text member" data-value="Nick">
    <p class="member-name">Nick</p>
    <p class="member-function">developer</p>
  </div>
</div>