Question

我想创建类似于本网站专业知识部分的内容：http://www.theelixirhaus.com/

基本上，当您将鼠标悬停在<h2>上方时，我只希望特定文字显示在图标上方。每个图标悬停都会将不同的文本显示在同一位置。我附上了一个JSBin到目前为止。我不确定li中的<p>是否正确使用，以及如何抓住它并在h2中显示它。

https://jsbin.com/cefuboxoje/edit?html,css,js,output

Answer 1

如果您想保留原来对悬停的使用，请使用.hover()代替.on('hover', function() {})

另外，您希望使用$(this).find('skills-title').html()获取<p>代码中的值文字。

我使用了.mouseenter()和.mouseleave()函数，因此当您不悬停元素时，<h4>文本将被清除。

$(document).ready(function() {
    $(".skills").on('mouseenter',function (){
        var title = $(this).find('.skills-title').html();
        $(".title-shown").html(title);
    }).on('mouseleave', function() {
        $(".title-shown").html('');
    });
});

PS。你在第一个class="skills"的原始jsbin演示中有一个额外的<li>。并不是说在这种情况下它会改变任何东西，只是友好提醒你检查你的代码。

Answer 2

您可以使用'mouseover'和.children().text()来查看您的文字：

$(".skills").on("mouseover", function (){
  var title = $(this).children().text();
  $(".title-shown").html(title);
});

Here is the demo!

Answer 3

以下是此行为的简化工作示例：

var $h4 = $('h4');

$('ul').on('mouseover', 'a', function(){
  
  var title = $(this).data('title');
  $h4.stop().fadeIn('fast').text( ': '+ title );
  
}).on('mouseout', function(){

  $h4.stop().fadeOut('fast');
  
});

h3, h4 { display: inline; }

ul li, ul li a { display:inline-block; }

ul li a {
  background: #ddd;
  color: #000;
  padding: 10px;
  text-decoration: none;
  transition: opacity .3s;
  opacity: 0.7;
}

ul li a:hover { opacity: 1; }

<script src='http://code.jquery.com/jquery.js'></script>
  
  <h3>Expertise</h3>
  <h4></h4>
  <ul>
    <li><a href="" data-title="User-centric empowering">One</a></li>
    <li><a href="" data-title="Leading scale deliverables">Two</a></li>
    <li><a href="" data-title="World-class expedite vortals">Three</a></li>
    <li><a href="" data-title="Bleeding-edge whiteboard synergies">Four</a></li>
  </ul>

如何在悬停jQuery上添加li文本到元素

3 个答案: