javascript - 需要帮助在悬停时显示 div

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

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