Question

我正在构建代码以便在我悬停在某个CREATE TABLE world_patterns ( country varchar, date int, mention mention list<frozen<tuple<text,int>>>, PRIMARY KEY (country, date) ); INSERT INTO world_patterns(country, date, mention) values ('LA', 20150704, [('US', 20150914), ('GOV',7), ('POL',9)]) ;上时显示文字。我能够制作这个，但它是静态的，我无法重现它。我想让它充满活力。我有一个功能可以识别您悬停在哪张照片上并显示属于它的div。我尝试过的内容如下所示：

HTML

div

CSS

<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>

JQuery的

.member-glenn {
   display: none;
}

我想要的是用 class / id 的默认值替换所有出现的 glenn （我的名字）。

Answer 1

不需要javascript！

＆＃13;

//$(".glenn").hover(function(){
//    $('.member-glenn').show();
//},function(){
//    $('.member-glenn').hide();
//});

＆＃13;

.member-glenn {
   display: none;
}

.glenn:hover .member-glenn {
  display: block
}

＆＃13;

<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>

＆＃13;

更多照片没有变化：

＆＃13;

.member-glenn {
   display: none;
}

.glenn:hover .member-glenn {
  display: block
}

＆＃13;

<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>

＆＃13;

现在也许它不应该跳arround这是一个可以通过定位修复的定位问题

＆＃13;

p {
  margin: 0;
}
.glenn {
  position: relative;
}

.member-glenn {
  position: absolute;
  top: 0;
  left: 25px;
  display: none;
}

.glenn:hover .member-glenn {
  display: block
}

＆＃13;

<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>

＆＃13;

现在你的老板可能会说：＆＃34;哦，但它应该有淡化效果＆＃34;仍然不需要javascript

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您的网页上同时拥有超过1个人，则可以使用以下示例。

＆＃13;

$(".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();
});

＆＃13;

.member-text {
  display: none;
}

＆＃13;

<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>

＆＃13;

Answer 3

用户Jquery鼠标事件

$(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>

Answer 4

试试这个。

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

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

4 个答案:

用户Jquery鼠标事件