Hover Effekt von Input Buttons entfernen

Status
Nicht offen für weitere Antworten.

dereisbaer

Grünschnabel
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
 
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
 
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).


PHP:
<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
 

Anhänge

  • buttons.txt
    1,1 KB · Aufrufe: 46
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück