wie bekomme ich auf einfache Art einen Mouseover-Effekt bei Bilder hin?

gericoach

Versuche gerade im Footer (widgets) einen Mouseovereffekt bei 4 Werbebutton hin zu bekommen, aber sxcheitere an meiner Unwissenheit. (Ziel ist es, den grauen Button (-gr) beim MouseOver gegen den farbigen auszutauschen, bei Mouseout wieder grau)
Habe in der CSS folgendes definiert:

Zitat

a.ad1 {
background: url(images/logocreations-gr.jpg);
position:relative;
z-index:12;
}
a.ad1:hover {
background: url(images/logocreations.jpg);
position:relative;
z-index:15;
}

Alles anzeigen

Und anschließend versucht, dieses einzubauen über

Zitat

<a class=ad1 href="mein Link"></a>

was anscheinend völliger Schwachsinn ist.

Wo muss ich ansetzen, um das richtig hin ui bekommen?
Die URL ist hier>>>

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

bgeissler

probiers mal so rum:

.ad1 a {
.ad1 a:hover {

hero1977

versuch mal so:

Code

a.ad1 {
      background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL](images/logocreations-gr.jpg);
width:200px;
height: 40px;
      }
 
 a.ad1:hover {
      background: [URL="http://forum.wordpress-deutschland.org/lexikon/?do=showentry&item=url"]url[/URL](images/logocreations.jpg);
      }

und dann

Code

<a class="ad1" href="mein Link"> </a>

gericoach

greifen leider beide nicht, weder die Version von bgeissler noch von hero1977

Hatte erst hero´s Version getestet, nichts. Aktuell ist die Version von bgeissler aktiv:
CSS

Zitat

.ad1 a {
background: url(images/logocreations-gr.jpg);
width:200px;
height: 40px;
}

.ad1 a:hover {
background: url(images/logocreations.jpg);
}

Alles anzeigen

Aufruf im Footer (Textwidget):

Zitat

<a class="ad1" href="http://www.logo-creations.de" target="_blank"></a>

Habt ihr noch einen Ansatz? Wo hakt es da bei mir? (auf das Theme bezogen :))

hero1977

ich hatte display:block vergessen, so gehts:

HTML

<html>
<head>
<style type="text/css">
<!-- 
a.ad1 {
      background: url(logocreations-gr.png);
display:block;
    width:200px;
    height: 30px;
      }
 
a.ad1:hover {
      background: url(logocreations.png);
      }


-->
</style> 
</head>
<body>


<a class="ad1" href="mein Link"> </a>




</body>
</html>

Alles anzeigen

da das a-tag ein inline-element ist wirst du nichts sehen wenn du kein block-element draus machst und der link keinen inhalt hat.

hero1977

übrigens würde ich dafür nur ein bild nehmen wo beide zustände drin sind, sonst ruckelts evtl. beim nachladen den zweiten bildes. (beispiel anbei)
EDIT: hab den anhang nochmal geändert, in meinem beispiel eben war der link nicht klassifiziert.

gericoach

hero 1977: Vielen Dank, es funktioniert!
bgeissler: ebenfalls vielen Dank!

Wie findet ihr das Ergebnis?

hero1977

Zitat von bgeissler

probiers mal so rum:
.ad1 a {
.ad1 a:hover {

das würde nur klappen wenn du ein DIV hast das die klasse "ad1" hat und in dem befindet sich dann ein link element ohne klasse. z.b.:

HTML

<html>
<head>
<style type="text/css">
<!-- 
div.ad1 {
      border:#ccc 1px dashed;
      }
div.ad1 a {
      background: url(logocreations.png) 0 0 no-repeat;
      display:block;
      width:200px;
      height: 30px;
      }
 
div.ad1 a:hover {
      background: url(logocreations.png) 0 -35px no-repeat;
      }


-->
</style> 
</head>
<body>


<div class="ad1">
<a href="mein Link"> </a>
</div>


</body>
</html>

Alles anzeigen

so mache ich das eigentlich meistens. so kann man z.b. bei wordpress sagen das im sidebar-element mit der klasse oder id "kalender" alle links blau sind und im sidebar-element mit der klasse oder id "archiv" alle rosa.

hero1977

Zitat von gericoach

hero 1977: Vielen Dank, es funktioniert!
bgeissler: ebenfalls vielen Dank!
Wie findet ihr das Ergebnis?

wo kann man das ergenis denn sehen? doch nicht auf http://real-estate-templates.com/ ???

gericoach

doch, auf RET, warum fragst Du so zweifelnd:D, hattest mehr erwartet? Unten im Footer...4 ads: ad1, ad2...

hero1977

Zitat von gericoach

doch, auf RET, warum fragst Du so zweifelnd:D, hattest mehr erwartet? Unten im Footer...4 ads: ad1, ad2...

nein hatte nur aufgrund werbeblocker die banner nicht gesehen :wink: jetzt in firefox mit werbeblocker seh ich plötzlich einen ganz rechts (handwerkertipps) im explorer ohne webeblocker seh ich alle 4.

übrigens das "great real estate" plugin werde ich wohl auch demnächst auf einer seite einsetzten. schönes ding. besser als das kommerzielle agentpress theme, weil das hat keine wirklichen zusatzfunktionen für makler soweit ich das sehen konnte, kam mir auf den ersten blick eher vor wie ein teures theme.

Tutrix

Wenn du gerade da unten im Footer bist, kannst noch das "u" bei "Stdiopress" einfügen. :D

gericoach

meine Themes sind alle Eigenproduktionen und ohne Plugins gemacht (bis auf das RET Theme, das ist "metric" von Studiopress), aber dieses "great real estate" Plugin sieht sehr interessant aus...Das Agentpress Theme hat den Nachteil, dass die Suchfunktion einfach nicht vernünftig läuft, habe damit schon experimentiert. Kann man vergessen. Die Themes ansich sind sehr gut, brauche im Schnitt 6-7 Stunden, um sie an Kundenwünsche anzupassen und da ich damals für 199 $ das komplette Paket gekauft habe, incl. aller neu hinzukommenden Themes, incl. Genesis Framework usw. rechnet sich das sehr gut.
Woran erkennt Dein Browser, dass es Werbung ist, was da im Footer rumkreucht???

gericoach

"ich kaufe ein "u" und möchte lösen: STUDIOPRESS":D

nenn mich ruhig "Blitz"...oder "Wiesel"

Tutrix

ach ja, ich sehe mit Addblock auch nur eins ganz rechts

vielleicht liegts an der class ad1 ad2 usw.

gericoach

wie könnte ich das umgehen? komplett neue classes? ad1, werb2, kaufmich3...?

Tutrix

ja, hab gerade mal im Filter nachgesehen ad, add, ads usw. wird alles geblockt

musst also was verwenden was nicht auf Werbung schließen lässt

bei deinem letzten haste Glück, ad4 wird noch nicht aufgeführt ;)

gericoach

funktioniert es jetzt? habe die classes an die Ziele angepasst.

Tutrix

ja, sind alle da :wink:

gericoach

vielen Dank für die tipps! War wirkliche Hilfe!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

wie bekomme ich auf einfache Art einen Mouseover-Effekt bei Bilder hin?

Jetzt mitmachen!