jquery - 奇怪的 CSS 属性行为

标签 jquery html css hover cursor

我一直能够解决 css 中的问题(甚至几天后)，但这次，我不知道， friend 们也是。

简单地说，:hover属性(property)和cursor属性目标不应作为目标。

下面，我放了 FIDDLE 代码和 HTML+CSS+JS，下面是完整的问题描述。

FIDDLE https://jsfiddle.net/Lkxragtb/

HTML

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Experiment - jQuery</title>
<link rel="icon" href="" type="image/gif">
<meta name="author" content="Michal Šeps">
<meta name="description=" content=""> 
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]><script src="bower_components/html5shiv/dist/html5shiv.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="java.js"></script>
<link rel="stylesheet" type="text/css" href="_css/main.css">
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
<!--Google Analytics-->
</script>
</head>

<body>

<nav id="nav_left">
    <ul>
        <li>Expermient JQ 01
            <ul class="nav_left_ul02">
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
            </ul>
        </li>
        <li>Expermient JQ 02
            <ul class="nav_left_ul02">
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
            </ul>
        </li>
        <li>Expermient JQ 03
            <ul class="nav_left_ul02">
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
            </ul>
        </li>
        <li>Expermient JQ 04
            <ul class="nav_left_ul02">
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
            </ul>
        </li>
        <li>Expermient JQ 05
            <ul class="nav_left_ul02">
                <li>The Test 05</li>
                <li>The Test 05</li>
                <li>The Test 05</li>
            </ul>
        </li>
        <li>Expermient JQ 06
            <ul class="nav_left_ul02">
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
            </ul>
        </li>
        <li>Expermient JQ 07
            <ul class="nav_left_ul02">
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
            </ul>
        </li>
        <li>Expermient JQ 08
            <ul class="nav_left_ul02">
                <li>The Test 08</li>
                <li>The Test 08</li>
                <li>The Test 08</li>
                <li>The Test 08</li>
            </ul>
        </li>
    </ul>
</nav>



</body>
</html>

CSS

@charset "UTF-8";
/*UPPER LEVELS*/




/* CSS Document */
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*V pr�pade �e nen� podporov�n browserem, mu�e tohle pomoct*/
nav, aside, main, details, header, hgroup, menu, article, section, footer, figure, figcaption, small {
        display: block;
    }


/*LINKS, HEADER, NAVIGATION LEFT, MAIN, FOOTER, LINKS*/

body {
    background-color: rgba(129,70,0,1.00);
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: 'Comfortaa', cursive;
    }



/*---------------------------------------LINKS------------------------------------------*/

a {
    text-decoration:none;
    color:rgba(255,255,255,1.00);
    }




/*------------------------------------NAVIGATION LEFT---------------------------------------*/
#nav_left {
    width: 170px;
    height: auto;
    float: left;
    }

    #nav_left > ul {
    width: auto;
    height: auto;
    }

    #nav_left > ul > li {
    width: auto;
    height: auto;
    font-weight:500;
    font-size: 15px;
    color: rgba(255,255,255,1.00);
    border: solid 2px rgba(255,255,255,1.00);   
    margin: 0 0 10px 0;
    float:left;
    padding: 5px;
    cursor: pointer;
    }

    #nav_left > ul > li:hover {
    background-color:rgba(255,255,255,0.5);
    }



/*------navigation left second ul set------*/   
.nav_left_ul02 {
    position: absolute;
    left: 170px;
    top: 0;
    width: 150px;
    height: auto;
    display: none;
    background-color:rgba(255,255,255,0.30);
    }

    .nav_left_ul02 > li {
    width: auto;
    height: auto;
    font-weight:100;
    font-size: 15px;
    color: rgba(255,255,255,1.00);
    border: solid 2px rgba(255,255,255,1.00);   
    margin: 0 0 10px 0;
    padding: 5px;
    cursor: pointer;
    }   

    .nav_left_ul02 > li:hover {
    background-color:rgba(255,255,255,0.5);
    }   

    .nav_left_ul02 > li > a {
    display: block;
    width: auto;
    height: auto;
    }

JavaScript

$(document).ready(function() {




$("#nav_left > ul > li").click(function(){
    if ( $(".nav_left_ul02").is(":visible") ) {
        $(".nav_left_ul02").hide();
        $(this).children(".nav_left_ul02").show();
        console.log("1 fired");
    } else {
        $(this).children(".nav_left_ul02").show();
        console.log("2 fired");
    }
 });



/*$("#nav_left > ul > li").click(function(){
        $("#nav_left > ul > li > ul").hide();
        $(this).children(".nav_left_ul02").show();
   });*/


/*$("#nav_left > ul > li").click(function(){
        $(".nav_left_ul02").toggle();
   });*/


/*
$("#nav_left > ul > li").click(function(){
    if ( $(this).children(".nav_left_ul02").is(":visible") ) {
        $(this).children(".nav_left_ul02").hide();
    } else {
        $(this).children(".nav_left_ul02").hide();
        $(this).children(".nav_left_ul02").toggle();
    }
});
*/


/*$("#nav_left > ul > li").click(function(){
        $(this).children(".nav_left_ul02").toggle();
   });*/

});

PROBLEM DESCRIPTION

如您所见，我使用 > 标志来针对特定的 child 。当您将鼠标悬停在菜单的第二行时，它会正常工作。然后你点击一些东西，内部菜单的第二行就会打开，就像它应该的那样。但是，现在如果您将鼠标悬停在那里，您会注意到 <li> 的第一行和第二行children blinks!, 那个没有设置 那里!。如果您注意到，在第二个内部菜单中，如果您将鼠标悬停 仅超过 <ul>盒子而不是超过<li>框，菜单的第一行仍然受到影响。悬停<ul>没有任何意义或制作 cursor:pointer对于 <ul>根本就是它变得更奇怪，当您注意到此多重连接不适用于所有属性时。如果您更改字体，字体会分开，背景或边框也是如此。但是设置 cursor和 hover在 <li> 的第一行突然也影响了 <li> 的第二行. 整个问题出在 css 上，可能出在 html 上(不太可能)，但不在 JavaScript 上(当然不是，虽然我还是个学生)

最佳答案

你有嵌套元素:

ul > li > ul > li

因此，当您悬停最嵌套的 li 时，您同时悬停了它的所有父级。

您更改了嵌套 ul 的位置，但它作为第一级 li 的嵌套元素保留在 DOM 中。因此，当您将鼠标光标放在第二层(甚至第三层 li)上时，您也悬停在第一层 li 上。

UPD

您可以通过 JavaScript 将一些 CSS 类(如 current)添加到悬停时的菜单项。并且该类将为悬停项设置所有样式。

关于jquery - 奇怪的 CSS 属性行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32025058/

上一篇：css - 一行菜单 float 变化

下一篇：php - 更改单个页面的链接颜色

相关文章：

HTML Canvas - 圆圈周围的虚线描边

html - 使用CSS float 在div上

javascript - 循环setInterval函数

javascript - 表单字段输入数字通过在前面添加零自动转换为3位数字

jquery - 如何使用 jQuery 设置输入(文本框)的值？

javascript - 为什么 requestAnimationFrame 函数接受一个元素作为参数？

单击时的Javascript菜单

css - 如何从 Inspect Element 获取 CSS 样式

HTML 按钮不会重定向到 Facebook 页面

javascript - 如何更改 Angular Js 或 Jquery 中的日期格式？

©2024 IT工具网  联系我们