Question

我正在制作新闻源，并且每个帖子的样式都有一个while循环，但后来我创建了一个

<input type="submit" name="deletePost" value="Delete" class="delete_post" />

并且使用样式它不起作用......样式很有效但:hover不起作用。也不是:active和其他人。很奇怪。

CSS

.image_post .user_avatar {
    width:32px;
    height:32px;
    overflow:hidden;
    border-radius:50%;
}
.image_post .user_avatar img {
    width:32px;
    min-height:32px;
}
.image_post .user_name {
    margin-top:7px;
    color:#fc0096;
    margin-left:-5px;
}
.image_post .timeago {
    color:#999;
    font-size:10px;
    position:absolute;
    top:10px;
    right:10px;
}
.image_post img {
    width:100%;
    border:1px solid #ccc;
}
.image_description {
    width:100%;
    padding-bottom:8px;
    background:white;
    text-align:left;
    color:#000;
    margin-top:-10px;
}
.image_post input[type="submit"] {
    border:0;
    position:absolute;
    top:30px;
    right:10px;
    background:black;
    padding:0;
    margin:6px 0 0 0;
    color:#fff;
    font-size:9px;
    text-decoration:underline;
    z-index:999;
}
.image_post input[type="submit"]:hover {
    cursor:pointer !important;
}

HTML INSIDE PHP循环

    <div class="image_post">
    <input type="submit" name="deletePost" value="Delete" class="delete_post" />
    <div class="user_avatar">
        <img src="avatars/'.$pica['username'].'.jpeg" />
    </div>
    <div class="user_name">'.$pica['username'].'</div>
    <br>
    <br>
    <br>
    <br>
    <div class="timeago">'.$diff.'</div>
    <div class="image_description">'.$pica['description'].'</div>
    <img src="upload/'.$pica['name'].'" />
    <div class="clear"></div>
</div>

我真的不明白为什么:hover不起作用。它确实采用了正常的样式，但:hover，:active等不起作用。我正在努力解决这个问题，这真的很奇怪，因为我每天都会做html / css 2年。我尝试了很多可能的解决方案，但遗憾的是......他们失败了。即使在pencode / jsfiddle中，它也失败了光标：指针; /

Answer 1

即使这很奇怪......尝试在CSS上使用类似.delete_post:hover的类而不是input[type="submit"]:hover。

我认为应该可以正常工作。如果没有，请尝试为其设置ID并尝试使用.image_post #delete_post:hover等ID。

因为它非常奇怪，因为它应该可以正常工作......也许你可以试试jQuery并做类似的事情：

$(document).ready(function(){
    $(".delete_post").hover(function(){
        $(this).attr("style","cursor:pointer;");
        $(this).removeAttr("style");
    });
});

但是再次......我不明白为什么:hover不适合你。

悬停时提交按钮不起作用

1 个答案: