[Gelöst] Hover Effekt mit was?
Eingetragen von Svenswiss (218)am 07.09.2012 - 16:30 Uhr in
Ein wunderschönen Guten Tag!
Diese Website http://www.dialoxx.de/ hat 3 Hovers die mir optisch sehr gefallen, mit was für ein Modul ist das realisiert worden?
ist es (views slideshow)? oder etwas ganz anderes.
LG
Sven
- Anmelden oder Registrieren um Kommentare zu schreiben
Das ist mittels JavaScript
am 07.09.2012 - 16:45 Uhr
Das ist mittels JavaScript geregelt über die Events onmousover und onmouseout. Also irgendwie zwei Inhalte untereinander ausgeben, das Anzeigefeld in der Höhe beschränken (über CSS) und auf overflow: node; stellen. Dann mittels jQuery/JavaScript den Nullpunkt des Feldes verschieben (z.B negative Top-Margin).
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Dankeschön Werner für deine
am 07.09.2012 - 20:27 Uhr
Dankeschön Werner für deine Infos. Dank dir habe ich etwas gefunden http://www.incg.nl/blog/2008/hover-block-jquery/
nur bei mir funktioniert das nicht mit Hover. Bleibt alles stehen passiert nix. Habe ich was übersehen?
So bin ich vorgegangen.
Datei: script.js
$(function() {$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
Datei: meincss.css
ul.hover_block li{
list-style:none;
float:left;
background: #fff;
padding: 10px;
width:300px; position: relative;
margin-right: 20px; }
ul.hover_block li a {
display: block;
position: relative;
overflow: hidden;
height: 150px;
width: 268px;
padding: 16px;
color: #000;
font: 1.6em/1.3 Helvetica, Arial, sans-serif;
}
ul.hover_block li a { text-decoration: none; }
ul.hover_block li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
Neuer Block erstellt mit
<ul class="hover_block"><li><a href="/"><img src="/drupal/sites/all/themes/mysite/images/test.jpg" alt="alt" /> Text</a></li>
<li><a href="/"><img src="/drupal/sites/all/themes/mysite/images/test.jpg" alt="alt" /> Text.</a></li>
</ul>
***UPDATE*** So funktioniert es!
jQuery(function() {jQuery('ul.hover_block li').hover(function(){
jQuery(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
jQuery(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
LG
Sven
Es fehlte bei Deinem ersten
am 07.09.2012 - 21:30 Uhr
Es fehlte bei Deinem ersten Script nur eine Kleinigkeit, ein (jQuery). Damit sähe das Script dann so aus:
$(function() {$('ul.hover_block li').hover(function(){
$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
})(jQuery);
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Ich habe noch eine kleine
am 07.09.2012 - 21:57 Uhr
Ich habe noch eine kleine Frage.
Wie erreiche ich z.B. Bild ist vorne drüber ist text, beim Mouse-over kommt ein neuer text bild sollte weiter hin bleiben
Eigentlich das gleich nur umgekehrt
LG
Sven
Bild in unabhängig von den
am 07.09.2012 - 22:47 Uhr
Bild in unabhängig von den Texten einstellen (z.B. mit Position relativ zum äußeren Div) und auf einen anderen z-index legen, damit es vor/hinter den Text kommt.
Beste Grüße
Werner
.
Werner
drupal-training.de
Moderator und Drupal Trainer
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *
Ich habe das jetzt so
am 08.09.2012 - 15:35 Uhr
Ich habe das jetzt so gelöst.
script.js ***hier bin ich mir nicht sicher ob das so ok ist, aber es funktioniert***
jQuery(function() {
jQuery('ul.hover-block-left li').hover(function(){
jQuery(this).find('img').animate({top:'300px'},{queue:false,duration:500});
}, function(){
jQuery(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
jQuery(function() {
jQuery('ul.hover-block-right li').hover(function(){
jQuery(this).find('img').animate({top:'300px'},{queue:false,duration:500});
}, function(){
jQuery(this).find('img').animate({top:'0px'},{queue:false,duration:500});
});
});
CSS
ul.hover-block-left li {
list-style:none;
float:left;
padding: 10px;
width:300px;
position: relative;
margin-right: 38px;
margin-left: 50px;
}
ul.hover-block-left li a {
display: block;
position: relative;
overflow: hidden;
height: 138px;
width: 308px;
padding: 30px;
}
ul.hover-block-left li a {
background-image: url("images/my-image2.png");
background-repeat: no-repeat;
text-decoration: none;
}
ul.hover-block-left li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
ul.hover-block-right li {
list-style:none;
float:left;
padding: 10px;
width:300px;
position: relative;
margin-right: 38px;
margin-left: 50px;
}
ul.hover-block-right li a {
display: block;
position: relative;
overflow: hidden;
height: 137px;
width: 308px;
padding: 30px;
}
ul.hover-block-right li a {
background-image: url("images/my-image1.png");
background-repeat: no-repeat;
text-decoration: none;
}
ul.hover-block-right li img {
position: absolute;
top: 0;
left: 0;
border: 0;
}
Block
<ul class="hover-block-right">
<li><a href="user/register1"><img src="/root/sites/all/themes/my-theme/images/my-image3.png" alt="irgendwas" /> </a></li>
</ul>
<ul class="hover-block-left">
<li><a href="user/register2"><img src="/root/sites/all/themes/my-theme/images/my-image4.png" alt="irgendwas" /> </a></li>
</ul>
LG
Sven