Question

我有标签，我正在尝试将鼠标悬停添加到标签内的内容中：

<section class="tabs"> <input id="tab-1" name="radio-set" class="tab-selector-1"

        checked="checked" type="radio"> <label for="tab-1" class="tab-label-1">About</label>
      <input id="tab-2" name="radio-set" class="tab-selector-2" type="radio"> <label

        for="tab-2" class="tab-label-2">Services</label> <input id="tab-3" name="radio-set"

        class="tab-selector-3" type="radio"> <label for="tab-3" class="tab-label-3">Work</label>
      <input id="tab-4" name="radio-set" class="tab-selector-4" type="radio"> <label

        for="tab-4" class="tab-label-4">Contact</label>
      <div class="clear-shadow"></div>
      <div class="content">
        <div class="content-1">
          <h2>About us</h2>
          <p>Hover over me!</p>
          <h3>How we work</h3>
          <p>Info </p>
        </div>
        <div class="content-2">
          <h2>Services</h2>
          <p>Info</p>
          <h3>Excellence</h3>
          <p>Info </p>
        </div>
        <div class="content-3">
          <h2>Portfolio</h2>
          <p>Info</p>
          <h3>Examples</h3>
          <p>Info </p>
        </div>
        <div class="content-4">
          <h2>Contact</h2>
          <p>Info</p>
          <h3>Get in touch</h3>
          <p>Some Info </p>
        </div>
      </div>
    </section>

我在那里有内容，当有些内容悬停在我希望在一个框中显示的内容时：

                <div class="span6 mb-20">
                <h2 class="element-title">Toggle</h2>
                <ul id="toggle-view">
                  <li class="clearfix">
                    <h3>blah</h3>
                    <span>+</span>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum  </p>
                    </div>
                  </li>
                  <li class="clearfix"> <span>+</span>
                    <h3>The Best Solution For Your Business</h3>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum  </p>
                    </div>
                  </li>
                  <li class="clearfix"> <span>+</span>
                    <h3>Blah</h3>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum </p>
                    </div>
                  </li>
                </ul>
                <!--end:toggle-view--> </div>
              <!--span6--> </div>

我怎么办？谢谢！我尝试过多次，但我没有运气，希望你们能搞清楚。我已经在使用jquery了，所以jquery解决方案会起作用！再次谢谢！

@Ohgodwhy我试过这个但是它不起作用，它把我带到了页面的顶部：

<div class="content-1">
          <h2>About us</h2>
          <p>info</p>
          <h3>How we work</h3>
          <p>info</p>
        </div>
        <script>
          $('p').hover(function(){
   $('div').toggle(); 
}, function(){
   $('div').toggle();  
});
        </script>
        <div class="span6 mb-20">
                <h2 class="element-title">Toggle</h2>
                <ul id="toggle-view">
                  <li class="clearfix">
                    <h3>blah</h3>
                    <span>+</span>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum  </p>
                    </div>
                  </li>
                  <li class="clearfix"> <span>+</span>
                    <h3>The Best Solution For Your Business</h3>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum  </p>
                    </div>
                  </li>
                  <li class="clearfix"> <span>+</span>
                    <h3>Blah</h3>
                    <div class="clear"></div>
                    <div class="panel clearfix">
                      <p>Lorem ipsum </p>
                    </div>
                  </li>
                </ul>
                <!--end:toggle-view--> </div>
              <!--span6--> </div>

Answer 1

您忘记了脚本标记上的$(function(){}。由于您使用的是jQuery，因此您永远不会忘记用$(function(){}

包装它

<script>
$(function(){
    $('p').hover(function(){
           $('div').toggle(); 
        }, function(){
           $('div').toggle();  
        });
    });
});
</script>

Answer 2

<script>
$(document).ready(function(){
    $(document).on("mouseenter","p",function(){
        $('div').toggle();
    });
    $(document).on("mouseout","p",function(){
        $('div').toggle();
    }); 
});
</script>

Answer 3

试试这会帮到你

$('.p').hover(

 function () {
     $('div').toggle();
 },

 function () {
     $('div').toggle();
     }
 });

您的答案Link

需要帮助在悬停时显示div

3 个答案: