Antworten auf deine Fragen:
Neues Thema erstellen

hover div verlinken

onlyskyy

Noch nicht viel geschrieben

Hallo,

ich habe ein Problem mit dem verlinken der div. Ich habe mit CSS einen Hover Effekt gemacht, so dass die Transparenz der Buttons langsam weg geht, aber kriege es jetzt nicht hin, dass die divs verlinkt werden ohne dass ein Text mitten in den Buttons ist.
Mit javascript geht es ganz einfach mit
<div id="Button1" onClick="location.href='seite.html';"></div>
jedoch sind es externe Links und da muss ein neuer Tab geöffnet werden, ausserdem möchte ich wenn es geht javascript komplett nicht benutzen

Hier mal der Code:

HTML:
<style type="text/css">
#Button1 {
	position: absolute;
	left: 400px;
	top: 400px;
	width: 200px;
	height: 37px;
	opacity: 0.8;
	background-image: url("BildvomButton.jpg");
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

#Button1:Hover {
	position: absolute;
	opacity: 1;
}
</style>
<body>
<div id="Button1"><a href="#.html">HiermöchteichkeinTextweilsonstderButtonversautwird</a></div>
</body>

Btw. ich habe vor nicht einer Woche mit html/css begonnen deswegen kann es auch sein dass irgendwas im Code nicht komplett richtig ist :D:D
 
Zuletzt bearbeitet:

cebito

undefined

AW: hover div verlinken

Ein div ist kein Link, sondern das a-Element ist der Link. Und der ist ein Inlineelement, benötigt also display:block; und dann entsprechende Dimensionsangaben.
 

patrick_l

Hat es drauf

AW: hover div verlinken

HTML:
<a href="#">Inhalt</a>
Code:
a {width:200px; height:40px; text-indent:-99999px; background:url(assets/images/button.png) 0 0 no-repeat; display:block;}
Edit: Wenn der selbe Button mehrmals verwendet wird, dem a-tag die Klasse Button verpassen und im CSS nach Wunsch formatieren. Müsste dann folgendermaßen aussehen.

HTML:
<a class="button" href="#">Inhalt</a>
Code:
 .button {width:200px; height:40px; text-indent:-99999px; background:url(assets/images/button.png) 0 0 no-repeat; display:block;}
Möglich wäre aus das setzen eines span-tags, und dieses mittels display:none; ausblenden. Ich empfehle aber text-indent, da es für Suchmaschinen und Screenreader besser ist.
HTML:
<a href="#"><span>name</span></a>
Code:
a {width:200px; height:40px; background:url(assets/images/button.png ) 0 0 no-repeat; display:block;}
span {display:none;}
Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.527
Neuestes Mitglied
Christian Eidelloth
Oben