悬停效果不起作用。这是小提琴: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>
答案 0 :(得分:3)
我不知道您为z-index
设置#düzenleyici
属性的原因。如果不需要,请将其删除。
答案 1 :(得分:1)
只需将z-index: -1
移到以下部分:
#düzenleyici {
z-index: -1;
}
如果需要,可将其更改为正值。