Startseite
  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche
Startseite › Forum › Drupalcenter.de › Tipps & Tricks ›

[Gelöst] Hover Effekt mit was?

Eingetragen von Svenswiss (218)
am 07.09.2012 - 17:30 Uhr in
  • Tipps & Tricks
  • Drupal 7.x oder neuer

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

‹ Block bei bestimmten Seiten und Inhaltstyp anzeigen Nach diverser Updates: Rules Weiterleitung mit doppeltem Sprach-Präfix ›
  • Anmelden oder Registrieren um Kommentare zu schreiben

Das ist mittels JavaScript

Eingetragen von wla (9318)
am 07.09.2012 - 17: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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Dankeschön Werner für deine

Eingetragen von Svenswiss (218)
am 07.09.2012 - 21: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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Es fehlte bei Deinem ersten

Eingetragen von wla (9318)
am 07.09.2012 - 22: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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ich habe noch eine kleine

Eingetragen von Svenswiss (218)
am 07.09.2012 - 22: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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Bild in unabhängig von den

Eingetragen von wla (9318)
am 07.09.2012 - 23: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
* - - - - - - - - - - - - - - - - - - - - - - - - - - - *

  • Anmelden oder Registrieren um Kommentare zu schreiben

Ich habe das jetzt so

Eingetragen von Svenswiss (218)
am 08.09.2012 - 16: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

  • Anmelden oder Registrieren um Kommentare zu schreiben

Benutzeranmeldung

  • Registrieren
  • Neues Passwort anfordern

Aktive Forenthemen

  • Font Awesome lokal einbinden
  • Block ausgabe Body Splitten
  • [Gelöst] cron und Seitenereignisse nicht sichtbar in: /admin/reports/dblog (uuuups)
  • RSS-Feed von Dritten in Block auf der Frontpage zeigen
  • Drupal10 erkennt php nicht korrekt
  • Drupal 10 und Content Security Policy (CSP)
  • footnotes bei D10 und CKE5
  • Export/Import der Einstellungen von Ansichten
  • Views und Entitäten
  • cannot be empty. in Drupal\Core\Database\Query\Condition->condition() (line 117
  • Datentransfer zwischen zwei Servern nach Drupal-Update auf 8.9.1 [gelöst]
  • Nach Drupal-Update: Entity-Reference wird nicht mehr richtig gespeichert
Weiter

Neue Kommentare

  • Ja, genau das habe ich getan,
    vor 15 Stunden 51 Minuten
  • Modulbeschreibung und Dokumentation gelesen und befolgt?
    vor 17 Stunden 26 Minuten
  • Das mit dem Ckeditor kenne ich
    vor 1 Tag 8 Stunden
  • Bilder positionieren ..
    vor 1 Tag 11 Stunden
  • Feed ..
    vor 1 Woche 1 Tag
  • Composer ohne php-check
    vor 1 Woche 1 Tag
  • Feeds Import
    vor 1 Woche 1 Tag
  • Aggregator läuft nun doch mit php 8.2 / Drupal 10
    vor 1 Woche 3 Tagen
  • Aggregator
    vor 1 Woche 4 Tagen
  • BTW, den "guten alten
    vor 1 Woche 4 Tagen

Statistik

Beiträge im Forum: 248720
Registrierte User: 19811

Neue User:

  • Jerrylearl
  • xJuliusCaesar
  • Ivantrulk

» Alle User anzeigen

User nach Punkten sortiert:
wla9318
stBorchert6003
quiptime4972
Tobias Bähr4019
bv3924
ronald3845
md3717
Thoor3678
Alexander Langer3416
Exterior2903
» User nach Punkten
Zur Zeit sind 0 User und 3 Gäste online.

Hauptmenü

  • » Home
  • » Handbuch & FAQ
  • » Forum
  • » Übersetzungsserver
  • » Suche

Quicklinks I

  • Infos
  • Drupal Showcase
  • Installation
  • Update
  • Forum
  • Team
  • Verhaltensregeln

Quicklinks II

  • Drupal Jobs
  • FAQ
  • Drupal-Kochbuch
  • Best Practice - Drupal Sites - Guidelines
  • Drupal How To's

Quicklinks III

  • Tipps & Tricks
  • Drupal Theme System
  • Theme Handbuch
  • Leitfaden zur Entwicklung von Modulen

RSS & Twitter

  • Drupal Planet deutsch
  • RSS Feed News
  • RSS Feed Planet
  • Twitter Drupalcenter
Drupalcenter Team | Impressum & Datenschutz | Kontakt
Angetrieben von Drupal | Drupal is a registered trademark of Dries Buytaert.
Drupal Initiative - Drupal Association