Question

您知道当您翻转菜单时，它会显示一个子菜单。我想保持子菜单可见甚至很难从按钮上滚出来，并且只有当我将鼠标悬停在其他链接或按钮上时才会更改子菜单。

这包括javascript吗？或者它可以在CSS中完成？

Answer 1

这就是我想的方法（使用jQuery）： 编辑：对于记录，这不能在HTML＆amp;仅CSS。

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        .link {
            display: block;
            width: 100px;
            height: 50px;
            border: 1px solid #000000;
            float: left;
            padding-right: 5px;
        }
    </style>
    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.link').mouseover(function() {
                $('.link').stop().animate({ //Ensure all ".link" tags are set to black border
                        border: '1px solid #000000'
                    });
                $(this).stop().animate({ //Change current ".link" to a red border
                    border: '5px solid #ff0000'
                }, 150, function() {
                    //Do nothing when the animation has finished
                });
            });
        });
    </script>
</head>
<body>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
    <a href="#" class="link">Link 1</a>
</body>
</html>

希望它有所帮助！

Answer 2

从它的声音中你最好的选择是设置javascript，这样当该项目悬停时，就会发生扩展的动作，并且只有在将鼠标悬停在竞争项目上时才会使该项目消失，如果你给出您目前使用的代码将更容易为您提供一些示例代码来构建。

Answer 3

使用Jquery /

菜单按钮类：.btnMenu {} 一类其他按钮＆amp;链接：.btnOthers {}

$('.btnMenu').hover(
   function() {
      $('ul.subMenu').css('display','none');};
   function() {
      $(this).children('ul.subMenu').css('display','block');};
);

$('.btnOthers').hover(
   function() {
      $('ul.subMenu').css('display','none');}
);

它应该可行，我现在没有其他解决方案/

可能只是使用css，但我找不到一个/

顺便说一下，css3＆amp; HTML5 //

保持悬停模式，直到鼠标悬停在另一个按钮/链接上

3 个答案: