1

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

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

3 回答 3

0

你忘记$(function(){}了你的脚本标签。由于您使用的是 jQuery，因此您永远不要忘记将其包装为$(function(){} 

<script>
$(function(){
    $('p').hover(function(){
           $('div').toggle(); 
        }, function(){
           $('div').toggle();  
        });
    });
});
</script>
于 2013-10-06T01:50:32.937 回答
0

试试这个会帮助你

$('.p').hover(

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

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

在这里你的答案Link

于 2013-10-06T03:50:45.507 回答
0 
<script>
$(document).ready(function(){
    $(document).on("mouseenter","p",function(){
        $('div').toggle();
    });
    $(document).on("mouseout","p",function(){
        $('div').toggle();
    }); 
});
</script>
于 2013-10-06T02:11:13.973 回答