CSS: Bei Linkhover auch Bildhover

[Tidus]

Hallo zusammen,

ich habe auf einer Seite mehrere Links und verschiedene Bilder.

Nun möchte ich einen Link mit mehreren Bildern "verbinden", bedeutet, dass wenn ich auf den Link hover, der Hover-Effekt der img's auch eintritt.

Zweck: Bei dem Hover über den Link sollen die entsprechenden Bilder farbig angezeigt werden (diese CSS Filter funktionieren schon wunderbar für sich, aber nicht in Verbindung mit dem Link).

Könnt ihr mir weiterhelfen?

Danke

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Ob das mit CSS allein geht, weiß ich nicht, aber mit jQuery geht es auf jeden Fall. Den Bildern eine Klasse geben, dann kannst Du hover() verwenden und den Bildern die entspr. CSS-Eigenschaften geben. Bzw. die CSS-Eigenschaften abgetrennt unter eine Klasse definieren und den Bildern diese Klasse zuteilen.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

Hm ok, danke schonmal

Ich arbeite nur seltenst mit JS, kannst du mir da kurz helfen?

Habe hier diesen Code gefunden:

$("td").hover(  function () {    $(this).addClass("hover");  },  function () {    $(this).removeClass("hover");  });

Aber das "td" müsste ich ja jetzt mit meinem Link ersetzen oder? Wie kann ich genau den einen Link definieren? Und wie kann ich dann genau dem passenden Bild die CSS Klasse zuweisen?

Danke
Christopher

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Der Ansatz ist schon sehr gut. Du musst jetzt nur deinem a-href-Tag eine ID geben und diese verwenden. Und den img-Tags der Bilder eine Klasse geben und diese ebenfalls verwenden. Eine Klasse deshalb, weil man diese mehrfach vergeben kann.

$("#id_deines_a_href-tags").hover(function () {$(.klasse_deiner_img_tags).addClass("hover");},  function () {$(.klasse_deiner_img_tags).removeClass("hover");});

(Verwendest Du eine ID, musst Du ein # voranstellen. Verwendest Du eine Klasse, musst Du einen Punkt voranstellen. Ohne beides wird es als HTML-Tagname interpretiert.)

[Trüffelkrieger]

AW: CSS: Bei Linkhover auch Bildhover

Mit CSS ginge es eventuell mit verschachtelten Listen (also das entsprechende Bild immer als Unterpunkt eines Links). Aber JS ist vermutlich besser geeignet.

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Ja, vermutlich geht es so auch mit CSS. Dabei ist man, soweit ich weiß, nur immer daran gebunden, dass die Elemente, auf die das Hover wirkt, Kinder des Elementes sind, das das Hover auslöst. Deshalb verwende ich in solchen Fällen lieber jQuery.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

Also irgendwie bin ich immer noch auf dem falschen Weg:

Hier mein Css:

.desaturate  {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

.desaturate:hover {
filter: none;
}

Das funktioniert soweit auch, und so habe ich dann Link und Bild eingebaut:

<img src="img/kacheln2/logo.png" class="desaturate">

<a href="#" id="test">Aktuelles</a>

Script dann so:

<script>
$(#test).hover(function () {$(.desaturate).addClass("hover");}, function () {$(.desaturate).removeClass("hover");});
</script>

Aber ich komme zu keinem Ergebnis

Könnt ihr mir nochmal helfen?

LG

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Da hover eine Klasse ist, musst Du einen Punkt davorschreiben:

.desaturate.hover {
filter: none;
}

Es funktioniert zwar so, aber ich finde es unglücklich, für einen Klassennamen einen reservierten Bezeichner von CSS zu verwenden.
Und die Fehlerkonsole sagt dir, dass Du die Selektoren in Hochkommas einschließen musst:

$("#test").hover(function () {$(".desaturate").addClass("hover");}, function () {$(".desaturate").removeClass("hover");});

So funktioniert es dann.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

Keine Ahnung was ich falsch mache, aber es funktioniert immer noch nicht Habe es jetzt genauso eingebaut wie beschrieben.

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Hm, ich hatte es ausprobiert und bei mir hatte es funktioniert. Poste doch noch mal deinen Code, CSS, HTML und JS.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

Ok, hier der Code, nicht wundern, ist noch alles drunter und drüber

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Hein-Architekten</title>
<link rel="stylesheet" type="text/css" href="css/index2.css">
<script type="text/javascript" src="jquery.js">$("#1").hover(function () {$(".desaturate").addClass("link");}, function () {$(".desaturate").removeClass("link");});</script>
</head>
<body>

<div id="box">
<div id="kacheln">
<table border="0">
<tr>
<td><img src="img/kacheln2/logo.png" class="desaturate"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
</tr>
<tr>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/logo.png"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
</tr>
<tr>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/logo.png"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
</tr>
<tr>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/test.gif"></td>
<td><img src="img/kacheln2/logo.png"></td>
</tr></table>
</div>

<div id="content">

<div id="menu1">
<ul>
<li><a href="#" id="1">Aktuelles</a></li>
<li><a href="#">Industrie/Gewerbe</a></li>
<li><a href="#">Wohnhaus</a></li>
<li><a href="#">Kommunen</a></li>
<li><a href="#">Kirchliche Bauten</a></li>
<li><a href="#">Denkmalpflege</a></li>
<li><a href="#">Altbausanierung<br>Energetische Sanierung</a></li>
<li><a href="#">Leistungsspektrum</a></li>
<li><a href="#">Büro | Kontakt</a></li>
</ul>
</div>

<div id="menu2">
<ul>
<li>Test2</li>
</ul>
</div>

<div id="text">
<h1>Übersicht</h1>
<p>Hier folgt dann gaaaaanz viel Text</p>
</div>

<div id="footer">
<p>Hein Architekten | Sandgasse 4 | 97478 Knetzgau | 09527 / 503 | [email protected]</p>
</div>
</div>

</div>


</body>
</html>

CSS:

body {
background-color:white;
color:black;
margin:0;
font-family:Arial;
}

#box {
position:absolute;
top:25px;
left:50%;
margin:0;
margin-left: -400px;
width:800px;
padding:0;
}

#kacheln {
position:absolute;
margin:0;
padding:0;
background-color:grey;
width:800px;
height:340px;
}

table {
border:0;
border-spacing:0;
}
tr,td {
padding:0; 
}

#content {
position:absolute;
top:340px;
color:white;
width:800px;
margin:0;
padding:0;
min-height:250px;
}

ul {
padding-left:20px;
list-style-type:none;
font-size:14px;
line-height:20px;
}

ul a {
color:#fff;
text-decoration:none;
}

ul a:hover{
color:Red;
text-decoration:none;
}

#menu1 {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
background-color:#533A0E;
width:160px;
height:100%;
}

#menu2 {
position:absolute;
top:0;
left:160px;
margin: 0 auto;
padding:0;
background-color:#5D420F;
width:160px;
height:100%;
}

#text {
position:absolute;
top:0;
left:320px;
background-color:#684911;
margin:0;
padding:0 15px 0 15px;
width:450px;
height:100%;
}

#text h1 {
font-size:16px;
} 

#text p {
font-size:12px;
}

#footer {
position:absolute;
bottom:-50px;
color:#C0B6A6;
font-size:12px;
width:800px;
text-align:centeR;
letter-spacing:3px;
}

.desaturate  {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}

.desaturate .link {
filter: none;
}

.desaturate:hover {
filter: none;
}

Und die jquery.js Datei, aber die brauch ich jetzt glaub ich nicht hier rein kopieren.

Lg

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Mindestens hier liegt ein Fehler:

.desaturate:hover {
filter: none;
}

Vor dem hover muss ein Punkt stehen, da es eine Klasse ist.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

In diesem Fall soll es aber der normale HOVER aus pseudoklasse sein. Der funktioniert auch.

Der JS-Hover ist der mit .desaturate.link

[Sempervivum]

AW: CSS: Bei Linkhover auch Bildhover

Stimmt, inzwischen hatte ich das auch gesehen. Gucke weiter ...

Zwischen .desaturate und .link darf kein Leerzeichen stehen. Wenn doch, sucht jQuery unter den Elementen mit Klasse .desaturate die Kinder mit der Klasse .link.

[Tidus]

AW: CSS: Bei Linkhover auch Bildhover

Jop, hab ich dann auch gesehen, funktioniert aber ohne Leerzeichen auch nicht