悬停不起作用

时间:2014-06-09 14:28:14

标签: css

悬停效果不起作用。这是小提琴:http://jsfiddle.net/6WmnF/ 我不知道为什么。当我删除悬停并更改宽度属性(作为示例)时,它可以工作。但是悬停或光标属性不起作用,即使单独使用也是如此。我使用最新的谷歌浏览器版本。

CSS:

#düzenleyici{
        border: 1px solid #000;
        width: 550px;
        height: 300px;
        box-shadow: -1px 1px 4px #000;
        display:inline-block;
        position:relative;
        z-index:-1;
    }
    #araclar{
        width:auto;
        height:50px;
        background:#AAD3D4;
        display:inline-block;
        padding:5px 15px 5px 15px;
        border-bottom:1px solid #000;
    }
    #araclar>div{
        padding:0 5px 0 5px;
        display:inline-block;
        border:1px solid #606060;
        margin:0 3px 5px 3px;
        background:#F6F6F6;
        font-family:calibri;
    }
    #iclik{
        border: 1px solid #000;
        width: 100px;
        height: 267px;
        box-shadow: 1px 1px 4px #000;
        display:inline-block;
        position:relative;
        padding:33px 0 0 0;
        margin:0 0 0 -5px;
        z-index:1;
    }
    #araclar>div:hover{
        cursor:pointer;
    }

HTML:

<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="tasarim.css" type="text/css"/>
<script>
</script>
</head>
<body>
    <div id="düzenleyici">
        <div id="araclar">
            <div>
                Renk
            </div>
            <div>
                Yazı Tipi
            </div>
            <div>
                Yazı Boyutu
            </div>
            <div>
                Kalın
            </div>
            <div>
                İtalik
            </div>
            <div>
                Altı Çizili
            </div>
            <div>
                Resim Ekle
            </div>
            <div>
                Sola Daya
            </div>
            <div>
                Ortala
            </div>
            <div>
                Sağa Daya
            </div>
            <div>
                HTML Düzenleyicisi
            </div>
            <div>
                HTML Kodu Ek
            </div>
        </div>
    </div>
    <div id="iclik">
        asd
    </div>
</body>
<script>
</script>
</html>

2 个答案:

答案 0 :(得分:3)

我不知道您为z-index设置#düzenleyici属性的原因。如果不需要,请将其删除。

答案 1 :(得分:1)

只需将z-index: -1移到以下部分:

#düzenleyici {
    z-index: -1;
}

如果需要,可将其更改为正值。