Hovereffekt mit Überblendung

[Fishmasta]

Hallo Leute,
ich wollte gerade mal folgendes Beispiel anwenden: Rule of Thirds Overlay - jsFiddle

Momentan siehts so aus: http://marvinfischenich.de/hover/index.html

Die Dateien:
index.html - http://marvinfischenich.de/hover/index.html
index.css - http://marvinfischenich.de/hover/css/index.css
hover.js - http://marvinfischenich.de/hover/java-script/hover.js
jquery.js - http://marvinfischenich.de/hover/java-script/jquery.js

Wie man siehts funktioniert der Hover-Effekt leider garnicht.
Kann mir jemand sagen woran es liegt?
Habe jetzt schon zig Tutorials gelesen und verglichen und bin jetzt noch ratloser.

THX!

 

[threadi]

Wozu hast Du dafür jQuery eingebunden? Das was Du erreichen willst geht auch mit purem CSS. Dazu fehlt dir lediglich noch:

.main_menue:hover .hover {
 display: block;
}

 

[Sempervivum]

Hallo Fishmasta,
Du musst natürlich die selben Klassen wie in dem Beispiel verwenden: '.cat' und '.desc'. Du verwendest jedoch "main_menue" und "hover". Also entweder im HTML oder im Javascript anpassen.

 

[Fishmasta]

Wozu hast Du dafür jQuery eingebunden? Das was Du erreichen willst geht auch mit purem CSS. Dazu fehlt dir lediglich noch:

.main_menue:hover .hover {
 display: block;
}

wenn ich es mit reinem css umsetze, ist der übergang aber nicht animiert.
es gibt nur die zustände hover aus und hover an.
da mir das sanfte einblenden des hover-effektes sehr gut gefällt würde ich es gerne so machen.
soweit ich weiß geht das nur mit javascript.

Hallo Fishmasta,
Du musst natürlich die selben Klassen wie in dem Beispiel verwenden: '.cat' und '.desc'. Du verwendest jedoch "main_menue" und "hover". Also entweder im HTML oder im Javascript anpassen.

ups. hatte eine ältere version hochgeladen.
jetzt ist die akutelle on, in der die klassen stimmen.
leider funktioniert die animation trotzdem nicht :(

 

[Trüffelkrieger]

soweit ich weiß geht das nur mit javascript.

Das geht auch mit CSS3 (transition ist das Stichwort). Dann musst du allerdings statt display visibility verwenden.

 

[Cheffchen]

Hallo,

mal eine duslige frage.
wie so übernimst nicht einfach das erstmal 1zu1 von jsfiddle und wenn das funzt kannst ja die classen umbenennen?

Cheffchen

 

[Sempervivum]

Du musst die hover-Anweisung innerhalb von $(document).ready notieren, dann funktioniert es:

$(document).ready(function() {
  $('.main_menue').hover(
  function() {
    $(this).find('.hover').fadeIn();
    set2center($(this).find('.hover p'));
  }, function() {
    $(this).find('.hover').fadeOut();
  });
});