# Hover Effekt von Input Buttons entfernen



## dereisbaer (13. Juni 2003)

hey,

ich wollte nur wissen ob mann mit CSS den Hover effekt von den input buttons entfernen kann?

Falls es nicht mit CSS funktioniert wäre es nett wenn ihr mir eventuell sagt womit.

mfg Der Eisbär


----------



## Andreas Gaisbauer (13. Juni 2003)

Hi,

hmmm... also bei mir (IE6 - WinXP) haben die Buttons keinen Hover-effekt. Nur bei "OnClick"... Ich bin mir nicht sicher ob man das ändern kann, oder nicht - eine Lösung wäre aber z.B. die Buttons selbst mit CSS zu erstellen.

bye


----------



## dereisbaer (13. Juni 2003)

Wie macht man das denn??

mfg Der Eisbär


----------



## Andreas Gaisbauer (13. Juni 2003)

Hallo,

das kann man auf verschieden Arten machen - am einfachsten ist es einfach eine Grafik zu erstellen und diese als Link zu Benutzen - das geht schnell und Funktioniert immer.

Man kanns auch mit CSS + Javascript machen - daszu das Beispiel im Anhang (bitte in HTML umbenennen).



```
<html>
<head>
<style type="text/css">
<!-- 
.mybutton{
background-color:#efefef;
border:1px solid black;
width:80px;
color:black;
font-size:12px;
font-family:arial;
text-align:center;
padding:3px;
cursor:hand;
}

.mybutton_mouseover{
background-color:silver;
border:1px double black;
width:80px;
color:red;
font-size:12px;
font-family:arial;
text-align:center;
padding:3px;
cursor:hand;
}
-->
</style>

<script type="text/javascript">
<!--
function format(id, way) {
    if(way == 'omov'){
        document.getElementById(id).className = "mybutton_mouseover";
    }
    else{
        document.getElementById(id).className = "mybutton";
	  }
}
 
function gotoUrl(url){
    window.open(url,'NeuesFenster');
}
//-->
</script>


</head>
<body>

ohne Hover... <span class="mybutton" onClick="gotoUrl('http://www.tutorials.de');"> tutorials </span>
<br><br>
mit Hover... <span class="mybutton" id="1" onClick="gotoUrl('http://www.tutorials.de');" 
onMouseOver="format(this.id, 'omov')" onMouseOut="format(this.id, '')"> tutorials </span>
</body>
</html>
```

Was wurde gemacht?
1) eine CSS Klasse "MyButton" erstellt - diese kannst du dir selbst so Formatieren wie du willst
2) eine CSS Klasse "mybutton_mouseover" erstellt, falls für manche Buttons doch ein Hovereffekt gewünscht ist...
3) Die Button mittels <span> tags erstellen und ggf noch die Javascript Funktionen aufrufen. 

Man hätte anstatt gotoUrl() auch einen einfachen Link in die Buttons setzten können (mit <a href...>), mir wars aber so lieber 

Anstatt den Style mit JS zu ändern, kann man das auch mit den Psydoklassen von CSS machen, allerdings hatte ich damit einige Probleme in der Vergangenheit...

ciao


----------



## Andreas Gaisbauer (13. Juni 2003)

Noch ein paar (hilfreiche?) Links für dich:
http://www.drweb.de/html/formulare_3.shtml
http://www.drweb.de/html/formulare_14.shtml
http://www.drweb.de/trickkiste/tricks106.shtml
http://www.drweb.de/muster/cssmenu2.html
http://www.drweb.de/html/css_menues.shtml


----------



## dereisbaer (15. Juni 2003)

Danke für deine Hilfe.

MfG Der Eisbär


----------

