Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS: Bei Linkhover auch Bildhover

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS: Bei Linkhover auch Bildhover

    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
    Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

  • #2
    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.
    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

    Kommentar


    • #3
      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:
      HTML-Code:
      $("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
      Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

      Kommentar


      • #4
        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.
        Code:
        $("#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.)
        Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
        (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

        Kommentar


        • #5
          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.

          Kommentar


          • #6
            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.
            Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
            (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

            Kommentar


            • #7
              AW: CSS: Bei Linkhover auch Bildhover

              Also irgendwie bin ich immer noch auf dem falschen Weg:

              Hier mein Css:
              HTML-Code:
              .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
              Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

              Kommentar


              • #8
                AW: CSS: Bei Linkhover auch Bildhover

                Da hover eine Klasse ist, musst Du einen Punkt davorschreiben:
                HTML-Code:
                .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:
                Code:
                $("#test").hover(function () {$(".desaturate").addClass("hover");}, function () {$(".desaturate").removeClass("hover");});
                So funktioniert es dann.
                Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                Kommentar


                • #9
                  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.
                  Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

                  Kommentar


                  • #10
                    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.
                    Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                    (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                    Kommentar


                    • #11
                      AW: CSS: Bei Linkhover auch Bildhover

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

                      HTML:
                      Code:
                      <!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:
                      Code:
                      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
                      Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

                      Kommentar


                      • #12
                        AW: CSS: Bei Linkhover auch Bildhover

                        Mindestens hier liegt ein Fehler:
                        HTML-Code:
                        .desaturate:hover {
                        filter: none;
                        }
                        Vor dem hover muss ein Punkt stehen, da es eine Klasse ist.
                        Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                        (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                        Kommentar


                        • #13
                          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
                          Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

                          Kommentar


                          • #14
                            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.
                            Zuletzt geändert von Sempervivum; 06.08.2013, 10:30. Grund: Doppelposting
                            Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
                            (Andre Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)

                            Kommentar


                            • #15
                              AW: CSS: Bei Linkhover auch Bildhover

                              Jop, hab ich dann auch gesehen, funktioniert aber ohne Leerzeichen auch nicht
                              Das Leben ist zu kostbar um es dem Schicksal zu überlassen...

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 57.089   Beiträge: 432.164   Mitglieder: 29.279   Aktive Mitglieder: 38
                              Willkommen an unser neuestes Mitglied, Grufty.

                              Online-Benutzer

                              Einklappen

                              218 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 216.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • daniel5959
                                Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Hallo,

                                jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                                Bisher waren die Gaskunden gut dran, sie haben sich...
                                24.06.2022, 01:37
                              • Grufty
                                Handydarstellung
                                In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                                Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                                Es lag am COUNTER CODE.
                                22.06.2022, 09:04
                              • Sprueche
                                LustigX.de - Lustige Bilder & witzige Memes
                                Hallo liebe Leute,

                                ich will Euch ein neues Projekt von mir vorstellen. Es handelt sich um "LustigX.de". Auf der Webseite werden von Mitgliedern "Lustiges/Witziges" gepostet. Du kannst gerne ein Teil der Community werden und selber "Lustiges/Witziges" posten....
                                21.06.2022, 02:08
                              • daniel5959
                                Energiewende mit günstigem Ökostrom und Wärmepumpe
                                Hallo,

                                meine Berechnung für eine persönliche Energiewende.

                                A) Grob geschätzt für mein kleines Häuschen rund 850 Liter Heizöl im langjährigen Mittel, das wären (Heizöl - Heizwert ca. 9,8 kWh pro Liter) 8.330 kWh und wenn ich diese Wärme mit einer Wärmepumpe und einer Jahresarbeitszahl
                                ...
                                18.06.2022, 02:45
                              • rene_j
                                Euere Meinung und Feedback zu meinem Projekt - van-reise.eu
                                Um welches Thema geht es?
                                Es geht primär um die Themen Reisen, Wandern, Geocaching, Trekking, Urban Exploration (Lost Places) und Übernachtungen im Freien (Wälder, Berge etc.) sowie Fahrzeug Anschaffung und Ausbau.

                                Das Projekt steckt noch in Kinderschuhen.
                                Die Social-Media-Kanäle...
                                14.06.2022, 13:41

                              Die neuesten Beiträge

                              Einklappen

                              • Sprueche
                                Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                                Wegen Social-Media und SEO.

                                Update: Neues Design ist online!...
                                26.06.2022, 22:51
                              • eloms
                                Antwort auf Feedback zur Überarbeitung meiner Homepage
                                Hallo

                                So, ich habe diverse Ändeungen vorgenommen und ein Zufallsbild auf der Startseite eingefügt. Klickt man auf den Link, wird das ausgewählte Bild grün angezeigt.
                                War für mich gar nicht so einfach da so umzusetzen.
                                Langsam wird die Seite fertig.

                                mfg
                                ...
                                26.06.2022, 05:47
                              • daniel5959
                                Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Hallo,

                                jetzt sind alle Leute gut dran, die ihre Heizenergie im eigenen Haus lagern können und schon im Frühjahr Heizöl bestellt haben, sie müssen sich keine Sorgen um die Gaspreissteigerungen der kommenden Monate machen.

                                Bisher waren die Gaskunden gut dran, sie haben sich...
                                24.06.2022, 01:37
                              • ST747
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                hi,

                                beim gas ist die lieferung derzeit gedrosselt, weil ein pumpe kaputt ist.

                                deshalb werden auch die gasspeicher nicht so gefüllt, wie geplant.

                                nach meinen informationen muss die pumpe von einer deutschen firma gewartet oder repariert werden. das geht aber nicht,...
                                25.06.2022, 13:48
                              • daniel5959
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Nachtrag 2:

                                Frage: Wie weit würde man mit maximal 256 TWh (= max. 256 Mrd. kWh) Gas kommen?



                                In den letzten 3 Monaten des Jahres - Oktober, November und Dezember - werden im Mittel 277 TWh an Gas verbraucht, d.h. die maximal gefüllten Gasspeicher wären am Jahresende...
                                25.06.2022, 05:53
                              • daniel5959
                                Antwort auf Gaspreise - gut wer Energie auf Vorrat lagern kann
                                Nachtrag:

                                Deutschland hat genau genommen keinen Gasvorrat, sondern nur einen Gaspuffer, um die Spitzen im Winter abzupuffern.



                                Also wenn die Erdgasspeicher ganz voll wären, dann würde es für 2 bis 3 Monate reichen, aber nur wenn in dieser Zeit weiterhin Gas...
                                25.06.2022, 00:15
                              • Grufty
                                Handydarstellung
                                In der Handydarstellung meiner Homepage fehlt neuerdings das Menue. War bisher ok. Sonst alles ok.

                                Problem durch sehr prompte Hilfe durch IN MEDIA gelöst!
                                Es lag am COUNTER CODE.
                                22.06.2022, 09:04
                              • Localfu
                                Antwort auf Handydarstellung
                                Hier eine Lösung von mir
                                Code:
                                var linkTitle = ['Startseite', 'Über mich', 'Aktuelles', 'Kontakt', 'Impressum'];
                                var linkURL = ['home.html', 'about.html', 'news.html', 'contact.html', 'impressum.html'];
                                var topnav;
                                document.addEventListener('DOMContentLoaded', ()=> {
                                ...
                                24.06.2022, 16:16
                              • Localfu
                                Antwort auf Handydarstellung
                                Hallo Grufty,
                                leider ist dein JavaScript-Code fehlerhaft und weisst viele Fehler auf:
                                Code:
                                jQuery.noConflict()(function($){$("<form id='mobilemenu' class='right2'><select /></form>").appendTo("#topnav"),$("<option />",{selected:"selected",value:"",value:"",text:"F"
                                ...
                                24.06.2022, 15:22
                              • daniel5959
                                Antwort auf SpruecheX.de - Sprüche, Zitate und Weisheiten
                                Hallo,

                                mich ärgern immer noch die aufs Foto geklatschten Texte.

                                Warum wird nicht einfach nur ein unifarbener Hintergrund verwendet, wenn das Foto eh nicht so wichtig ist?

                                Den Text könnte man besser ins Foto einbauen, siehe Beispiel



                                ...
                                23.06.2022, 22:58
                              Lädt...
                              X