css - 悬停在div上不起作用

Question

这是我页面的 html 部分：

    <div class="edenKomentar">
            <div class="rejtingVoKomentar" onmouseover="alert('asd');">
                <div class="thumbUp"> </div>
                <div class="thumbDown"> </div>
            </div>
            <div class="imeVoKomentar">Name</div>
            <div class="tekstVoKomentar">Comment</div>
            <div class="datumVoKomentar">Date</div>
    </div>

这是我的CSS代码：

div.edenKomentar:hover {
//  border-bottom: dashed 1px gray;
    border-left: solid 8px #003366;
}
div.edenKomentar:hover div.imeVoKomentar {
    color:#003366;
}

.edenKomentar div.rejtingVoKomentar {
    position: absolute;
    overflow:hidden;
    right:5px;
    top:15px;
    height:35px;
    width: 100px;
    padding: 5px;
    border: solid 1px green;
}

.edenKomentar div.rejtingVoKomentar:hover{
    border: solid 2px green;
    background-color:#66FF00;
}


.rejtingVoKomentar .thumbUp,.thumbDown {
    position: relative ;
    height: 25px;
    width: 25px;
    border: solid 1px red;
    top: 10px;
}
.rejtingVoKomentar .thumbDown {
    right: 5px;
    background:url(sliki/Ikoni/Thumb-down-icon.png);
    background-repeat:no-repeat;
}
.rejtingVoKomentar .thumbUp {
    left: 5px;
    background:url(sliki/Ikoni/Thumb-up-icon.png);
    background-repeat:no-repeat;
}
.rejtingVoKomentar .thumbDown:hover{
    border: solid 2px red;
}

问题是 .rejtingVoKomentar （以及 .thumbUp 和 .thumbDown ）上的悬停（和 onmouseover）不起作用，而.rejtingVoKomentar有

position:absolute;

属性。这里有什么问题？

Answer 1

您将使用 jQuery 激活悬停在 DIV 上

或者只是想通过 CSS 使用它，你需要使用 ul,li 来代替

更新1

检查 SO Jquery Div Hover 中的此链接更改其他 Div 类

Answer 2

.headermenu li a{
   text-align:center;
   padding:0px 0 0 12px;
   margin-left:20px;
   display:block;
   color: #ccc;
   text-decoration:none;
   font-size:12px;
   float:right;
   background:url(../images/arrow.png) no-repeat left center;
 }

 .headermenu li a:hover{
    text-align:center;
    display:block;
    color: #0066CC;
    text-decoration:none;
    float:right;
    background:url(../images/arrow_hover.png) no-repeat left center;
 } 

Answer 3

您可以使用这个简短的 Jquery 代码：

$(document).ready(function() {
$(".rejtingVoKomentar").hover(
  function () {
    //On mouseOver
    alert('asd');
  },
  function () {
    //On mouseOut
  }
);});