| Autor |
Nachricht |
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 14.03.2012 00:07
Titel
|
  |
|
Hi, keine Ahnung wie dein Html aussieht und/oder ob ich
das Problem richtig verstanden habe, aber via CSS3 würde
das z.B. mit dem 'Geschwisterselektor' ~ gehen:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sister Hover</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#myDiv {
background-image:url(myimage.gif);
width:100px;
height:100px;
}
#myDiv:hover {
background-image:url(myhover.gif);
}
#myLink:hover ~ #myDiv {
background-image:url(myhover2.gif);
}
</style>
</head>
<body>
<a href="#" id="myLink">myLink</a>
<div id="myDiv">
foobar
</div>
</body>
</html>
|
Hier würde ein Hover auf das Div, myhover.gif als Background-
Image anzeigen. Ein Hover auf den Link würde im Div das
Background-Image myhover2.gif anzeigen.
Nur hier muß der Link halt vor dem Div stehen - bzw. genau
auf der selben "Ebene".
Grüße
zweitaccount.
|
|
| |
  |
 |
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mi 14.03.2012 02:52
Titel
|
|
|
| Zitat: | | Aber wenn mein Javascript manche Sachen anders "setzt" oder "benutzt", als jQuery das bereits tut, wird eins von beiden deaktiviert oder nicht? |
Nicht, wenn jQuery richtig benutzt wird
- Scopes und Namespaces
- keine gloablen Variablen
- jQuery-Variable/$ absichern, noConflict()
|
|
| |
|
|
|
Anzeige
|
|
|
immerIch
Dabei seit: 19.10.2010
Ort: #mein{display:block}
Alter: 35
Geschlecht: 
|
Verfasst Mi 14.03.2012 10:56
Titel
|
|
|
Naja, was ich geschrieben habe ist so nicht 100%ig richtig.
Du kannst natürlich per Child-Selektor arbeiten. Aber eben nur, wenn sich das eine Element innerhalb des anderen befindet:
| Code: |
<div>
<a href="blah.html">BLAH</a>
</div>
div:hover > a{
color: lime;
}
|
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Do 15.03.2012 15:54
Titel
|
|
|
Das ist dann schätze ich mein Problem, dass sich die Elemente in versch. Divs befinden. Ich zieh euch mal das relevante an Code raus:
html
| Code: |
<div id="col1">
<a href="#" id="sref" class="service_icon">Referenzen<span></span></a> <!-- Zu verknüpfender Link -->
<div class="ct">
<h2><a href="#">Referenzen</a></h2> <!-- Zu verknüpfender Link -->
<p>Beispieltext</p>
</div>
</div>
|
CSS
| Code: |
a.service_icon {
background-position: center top;
background-repeat: no-repeat;
display: block;
height: 178px;
position: relative;
text-indent: -9999px;
width: 300px;
}
a.service_icon:hover {
background-position: center bottom;
background-repeat: no-repeat;
display: block;
height: 178px;
width: 300px;
}
#sref {
background-image: url("../img/s1.png");
}
#col1, #col2, #col3 {
float: left;
height: auto;
width: 300px;
}
.ct {
margin: 0 auto;
width: 280px;
}
.ct h2 {
margin: 0;
text-align: center;
}
.ct h2 a, .ct h2 a:focus, .ct h2 a:visited, .ct h2 a:active {
color: #E31937;
font-weight: bold;
}
.ct h2 a:hover {
color: #000000;
font-weight: bold;
}
|
Das ganze ist also ein Bild und ein Link. Die sollen jeweils bei einem hover immer gleichzeitig das "a:hover" auslösen, also beim Bild die Position des Hintergrundbildes ändern oder ein anderes Hintergrundbild laden, bei dem Text einfach die Farbe ändern.
Ich bin kein Experte in HTML/CSS, wenn ich also einen für euch bescheuerten Ansatz hergestellt habe, mache ich das gerne nochmal neu mit einem anderen Verfahren. Dieses kannte ich als einziges (einen DIV verlinken mit text-indent: -9999px).
Danke für eure ganzen Antworten und Hilfen soweit! Das ist klasse 
Zuletzt bearbeitet von soy am Do 15.03.2012 15:57, insgesamt 3-mal bearbeitet
|
|
| |
 |
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 15.03.2012 22:53
Titel
|
|
|
Hi,
also wie die Struktur momentan ist geht das rein
über CSS (imho) nicht. Nur wenn jetzt das Service-
Icon-Teil über den Div mit dem Referenz-Link wäre,
könntest Du wie gesagt dem Div ein Hover über ~
mitgeben. So praktisch: http://jsfiddle.net/hJqDJ/
Aber das ist CSS3 und genaugenommen auch Bullshit.
Sauber bekommst Du das nur mit Js hin.
Grüße
zweitaccount
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Do 15.03.2012 23:02
Titel
|
|
|
Danke zweitaccount! Das Verfahren finde ich schon cool und Anwendung finde ich dafür mit Sicherheit bald mal!
Was sind denn Ansätze für so ein Javascript? Ich beherrsche keine einzige Zeile, deswegen muss ich nach Scripten googlen, die ich anpassen kann. Gibt es dafür Schlagworte o.ä.?!
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 16.03.2012 00:21
Titel
|
|
|
Hmm, also wenn Du gar keine Ahnung von JavaScript
hast, ist natürlich ziemlich schwierig. Schlagworte fallen
mir da auf Anhieb auch nicht ein - weils ja eigentlich eine
ganz super simple Geschichte ist.
Ich hab dir mal eben ein Beispiel in Verbindung mit mootools
JS-Framework gebastelt. Wird dir aber wahrscheinlich nicht
viel bringen, wenn Du noch nie was in der Richtung gemacht hast:
http://jsfiddle.net/BcACd/1/
Grüße
zweitaccount
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Fr 16.03.2012 13:42
Titel
|
|
|
Hey!
Klasse, danke! Das hilft schonmal sehr weiter! Schön wäre aber, wenn das andere wiederrum auch verknüpft ist. Also Hover übers Bild = Hover der Schrift, und nicht nur andersrum. Ich kann zwar kein Java schreiben, aber so grob verstehe ich es, wenn ich es sehe, also das könnte ich bei mir schon einbinden! Darf ich dein Script benutzen?
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Via FTP 2 Ordner miteinander mounten / verknüpfen ?
[Suche] Login-Skript Versch.User > versch. Seiten?
Versch. Powerpoint-Versionen - versch. Film-Formate?
hover-Button/hover-Bild wird darunter eingefügt
[PHP] Zwei Grafiken miteinander vergleichen
[PHP] Variablen miteinander kombinieren und Wert ermitteln
|
|
Willkommen auf dem Portal für Mediengestalter
