此效果指的是划过的和显示的内容不在划过的标题的内容里
效果如下
代码如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"/> <style> *{padding: 0;margin: 0;list-style: none;} .ts-p:hover{color: #0f0;} .tsDiv{display: none;position: absolute;left: 10px;top:20px;width: 200px;border:1px solid #096542;padding: 10px;} </style> </head> <body> <p class="ts-p">滑过显示提示</p> <div class="tsDiv"> <h3>注意事项:</h3> <p>1.必须穿皮鞋</p> <p>2.必须穿西装</p> </div> <script src="jquery-1.11.3.min.js"></script> <script> $(function(){ var timer = null; $('.ts-p').on('mouseenter', function () { clearTimeout(timer); $('.tsDiv').fadeOut(); if (!$('.tsDiv').is(":animated")) { $('.tsDiv').fadeIn(); } }); $('.ts-p').on('mouseleave', function () { timer = setTimeout(function () { $('.tsDiv').fadeOut(); }, 1000) }); $('.tsDiv').hover(function () { clearTimeout(timer); }, function () { $(this).fadeOut(); }); }) </script> </body> </html>