Cambia immagine al passaggio del mouse usando asp: imagebutton e CSS?

Question

Ho il seguente codice ma doesnt sembra funzionare:

<td align="center" style="padding-bottom:52.5px"> 
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server"  ImageUrl="/_layouts/Right_GrayArrow.png"/> 
</td> 

E una classe CSS per cambiare immagine al passaggio del mouse:

.RightArrow:hover 
{ 
background-image: url('/_Layouts/Right_GreenArrow.png') !important; 
} 

prega di avvisare. Grazie

Answer 1

Un ImageButton controlli rende come elemento <input type="image" /> con la ImageUrl proprietà diventando il src attributi come:

<input type="image" src="/_layouts/Right_GrayArrow.png" /> 

Pertanto si richiede un'immagine di sfondo a questo, che non si può vedere come immagine per la src è sovrapposto sopra di esso.

si hanno 2 scelte:

---

1) Cambiare il ImageButton per usare un'immagine di sfondo:

.RightArrow 
{ 
    width: /* width of image */ 
    height: /* height of image */ 
    background-image:url('/_layouts/Right_GrayArrow.png'); 
} 
.RightArrow:hover 
{ 
    background-image: url('/_Layouts/Right_GreenArrow.png'); 
} 

Se avete intenzione di utilizzare questo metodo, però, lo farei consigliamo invece di utilizzare <asp:Button />. Sembra inutile usare un <asp:ImageButton /> se non si sta nemmeno utilizzando l'attributo src.

---

2) utilizzare jQuery per cambiare l'immagine al passaggio del mouse:

$(".RightArrow").hover(function(){ 
    $(this).attr("src", "/_Layouts/Right_GreenArrow.png"); 
}, 
function(){ 
    $(this).attr("src", "/_Layouts/Right_GrayArrow.png"); 
}); 

Da segnalare questo funziona solo con javascript abilitato, ed è necessario includere la libreria jQuery.

Answer 2

La proprietà ImageUrl non è uguale all'impostazione dell'immagine di sfondo. Rimuovi il CSS e imposta le proprietà onmouseout e onmouseover nella tua pagina.

Answer 3

preferisco in questo modo:

<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/> 

bye