Question

请有人协助，看起来像这么简单的功能，但对于我的生活，我无法做到正确。我需要将它插入我的wordpress网站。

当鼠标悬停在另一个块上时，它是一个简单的节目隐藏内容。完全像this site上的那个，在解决方案标题下。我将鼠标悬停在标题栏上，我看到了右侧的内容。

有一个非常简单的方法吗？甚至是WP插件？

提前致谢。

Answer 1

我刚刚创建了一个简单的解决方案。请查看以下内容或https://jsfiddle.net/oneness/Lotaaxdh/

JS / CSS / HTML分别

                   
$( ".science" ).mouseover(function() {
  $( "#social_display" ).hide("fast"); 
  $( "#science_display" ).show("slow");
});

$( ".social" ).mouseover(function() {
  $( "#science_display" ).hide("fast");
  $( "#social_display" ).show("slow");
});

.box{
    background-color: #37545c;
    border:1px solid #000000;
    padding:5px 5px 5px 5px;
    color:#ffffff;
}
.right{
    float:right;
}
.left{
    float:left;
}
#science_display, #social_display {
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>

<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>

Answer 2

我为你做了这个，但如果你没有编码知识，那么单独添加可能很难。

https://jsfiddle.net/Skaadel/5s7symfe/

Jquery的

$('#puppies').hover(function() {
  $('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});

$('#kittens').hover(function() {
  $('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});

$('#aardvark').hover(function() {
  $('.display').html('Aardvark'); 
/** Change ('Aardvark') to change text displayed when hover**/
});

HTML

<div class="container"> 
  <div id ="kittens"></div>
  <div id ="aardvark"></div>
  <div id ="puppies"></div>
</div>
<br>

<div class="display">Hover on the picture for description.</div>

CSS

    body { background: black; }

.display {
  font:20pt 'Georgia';
  height:50px;
  width: 759px;
  text-align:center;
  background-color: white;
  border: 1px solid black;
  margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}

#kittens{
  background-image: url(http://goo.gl/Ktu3u0);
  height: 250px;
  width: 250px;
  display: inline-block;
}
#aardvark{
  background-image: url(http://goo.gl/qQUUff);
  height: 250px;
  width: 250px;
  display: inline-block;
}
#puppies{
  background-image: url(http://goo.gl/6gvDn2);
  height: 250px;
  width: 250px;
  display: inline-block;
}

我做得很快，所以设计不是那么漂亮。

在鼠标悬停框上显示隐藏内容

2 个答案: