PDA

View Full Version : hover problem with css on input submit button



tehni
Aug 11th, 2009, 07:31 AM
hi guys
i m using css based link buttons in forms input. now each button is combination of css class(image in class also) and simple html code in <input>.... i want to change whole look of button when hover...i used a class with image onmouseover... images shows perfectly when hover but the original image also shows ... means when hover rigional image show and hover on it as transparent... what should i do now... my css class is
.srch{
/* Sliding right image */

background: transparent url(../media/buttons/btn_search1.jpg) no-repeat scroll top right;
float:left;
display: block;
height: 23px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
margin-right: 6px;
padding-right: 13px; /* CHENGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
/* FONT PROPERTIES */
text-decoration: none;
color: #8a9295;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
background-color:#464f54;
}
.srch:hover{
background:url(../media/buttons/btn_search_hov.jpg);
height:25px;
width:109px;
}


html code is
<td align="left" valign="top">
<div style="background-color:#303a3c; height:25px; width:107px; border:none;">
<div style="float:left; height:23px; width:107px; margin-left:1px; margin-top:1px;">
<input type="submit" class="srch" name="search" id="search" value="&nbsp;Search &nbsp;&nbsp;&nbsp;&nbsp;" style="cursor:pointer; border-width:1px; border-color:8a9295; border-style:solid; height:21px; width:103px; margin-top:1px;"onmouseover="srch:hover"/>
</div></div>
</td>



an other probleb is when hover image shows it fit within div not overlap it...

plz help guys:confused:

Fou-Lu
Aug 11th, 2009, 09:06 AM
This isn't related to PHP.
Moving from PHP to HTML/CSS

Rowsdower!
Aug 12th, 2009, 05:54 AM
It looks like you are trying to use javascript to do something already handled by the CSS :hover. This is redundant, which is bad, but you are also not resetting the background image onmouseout (which would still be redundant, but would be logically complete for this model).

Try getting rid of the "onmouseover" attritube completely and see if this fixes the problem since absolutely no javascript is needed for this effect.

After that - if you are still having trouble - post a link to your test page so that we can see all of your code and images for debugging.