submit button on hover isn't working - php

Question

I'm working on a newsfeed and I have a while loop for every posts with the styles, but then I created an
<input type="submit" name="deletePost" value="Delete" class="delete_post" />
and with the styling it isn't working... well the styling works but the :hover isn't working. Nor the :active and others. Very strange.
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 WHILE LOOP
<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>
I really don't understand why the :hover isn't working. It does take the styles from the normal one, but then the :hover, :active etc isn't working. I'm struggling with this and it's really weird, because I do html/css for 2 years, every day. I tried a lot of possible solutions, but sadly... they failed. Even in pencode / jsfiddle it failed with the cursor:pointer ;/

Answer 1

Even tho it's weird... try using the class like .delete_post:hover on your CSS instead of input[type="submit"]:hover.
I think that should work fine. If not, try placing and ID for it and try with the ID like .image_post #delete_post:hover.
Since it's super weird because it should work fine... maybe you can try jQuery and do something like this:
$(document).ready(function(){
$(".delete_post").hover(function(){
$(this).attr("style","cursor:pointer;");
$(this).removeAttr("style");
});
});
But again... I don't see why :hover is not working for you.