Post, button mit hover effekt versehen ?

[Feuerball]

Hallo,
ich versuche gerade alle post buttons Neues thema, Neue antwort, Zitat, Profil usw mit einem Mousehover Effekt zu versehen über CSS. Der Hover Effekt ist ein Bild bzw 2 Bilder mit einem normalen und direkt dadrunter eines für Hover.

für mein Menü habe ich das gut hinbekommen aber für die viewtopic will es nicht nzw wen nich das so mache wie bei meinem Menü flipt der IE 6 und 7 aus :/

angefangen habe ich mit Edit (con_edit.gif)
viewtopci.php (class="test" - hinzugefügt)

Code: Alles auswählen

$edit_img = '<a class="test" href="' . $temp_url . '"><img src="' . $images['icon_edit'] . '" alt="' . $lang['Edit_delete_post'] . '" title="' . $lang['Edit_delete_post'] . '" border="0" /></a>';

subSilver.css

Code: Alles auswählen

.test {
  text-decoration: none;
  border:0;
  padding:0;
  display: block;
  text-indent: -9999px;
  letter-spacing: -9999px;
  font-size:0;
  width: 88px;
  height:22px;
  background: url("images//lang_german/icon_edit.png") 0 0 no-repeat;
}

.test:hover{background-position: 0 -22px;}	

subSilver.cfg (auskomatiert) wobei ich nicht weis ob das gut wäre wegen andere Mods, Sprache gibt es nur in Deutsch.

Code: Alles auswählen

$images['icon_edit'] = "$current_template_images/{LANG}/icon_edit.gif";

und zum Schluß noch die Bilder



Screen IE


Screen FF

[oxpus]

Du solltest a.text verwenden und dort die einzelnen Punkte definieren.
Dazu wäre es am geschicktesten, mit einem versteckten Block den Bereich bereits vorzuladen und beim Hover nur noch anzuzeigen, bzw. danach wieder zu verstecken.
Hier das Beispiel, wie es durch ein UPI2DB Add-On mit der Mininav funktioniert:

Code: Alles auswählen

a.mainmenu, a.mainmenu:link, a.mainmenu:visited, a.mainmenu:active  {
  position: relative;
  text-decoration: none;
  }
  
a.mainmenu:hover {
  background: transparent;
  z-index: 1000;
  cursor:help;
  }

a.mainmenu span.tipp {
  display: none;  
}

a.mainmenu:hover span.tipp {
   position: absolute; 
   width: 300px;
   display: block; 
   font:10px Verdana; 
   font-style:normal;   
   color: #cccccc; 
   padding:2px 2px 2px 2px;  
   background-color:#006699;  
   border:1px solid #000000; 
   color: #ffffff;
   text-align:center;
   top: 25px; 
   left: 20px;
  }

Also die reinen CSS-Definitionen...

[Feuerball]

Du solltest a.text verwenden und dort die einzelnen Punkte definieren.

Stimmt ein flüchtigkleitsfehler von mir.

alles klar werde ich mal Testen Danke.