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 具有

时，.rejtingVoKomentar（以及.thumbUp和.thumbDown）上的悬停（和onmouseover）无法正常工作

position:absolute;

属性。这可能是什么问题？

Answer 1

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

或者只是想通过CSS使用它只需要使用ul，li而不是

<强> UPDATE1

在SO Jquery Div Hover change other Div Class

中查看此链接

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
  }
);});

将鼠标悬停在div上无法正常工作

3 个答案: