Bildbeschreibung bei Mausbewegung verstecken (hover)

    Hallo zusammen, ich stelle zum ersten mal eine Frage hier. Hoffe ihr könnt mit weiterhelfen.
    Ich habe das template photo pure press. Wenn eine Beschreibung zu meinen Bildern eintrage wird diese jeweils auf dem Bild angezeigt. Wenn ich nun mit der Maus auf das Bild gehe verschwindet die Beschreibung.
    Was ich nun gerne hätte ist, dass es genau anders herum funktioniert. Die Beschreibung soll nur erscheinen wenn ich mit der Maus auf dem Bild bin.

    Ich dachte das ist nicht so schwierig aber ich bekomme es nicht hin. Deshalb bitte ich hier um Hilfe. Vielleicht kennt jemand das Problem.
    Freue mich über alle Hinweise.

    Danke im Voraus.

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Es gibt wahrscheinlich in der CSS Befehle, die dafür verantwortlich sind, dass der Text vorher und nicht erst beim hover angezeigt werden. Schalte diese mal irgendwo auf deiner Seite ein, damit ich es im Code sehen kann.
    Ich kann dir sonst nicht helfen. Viellicht kannst du das Verhalten per Theme-Einstellung ändern?

    PS: Falsch bedeutet in dem Fall ja nicht falsch, sondern nicht so gewollt. Der Effekt soll ja anders herum auftreten.

    der effekt wird nicht per CSS erzeugt.

    suche in den themefiles folgenden code:

    Code
    <div class="photodesc"

    die komplette zeile bitte hier posten

    // $thumb = wp_get_attachment_image_src($attach, 'slider-thumb', false);
    $metadata = wp_get_attachment_metadata($attach);


    $alt = $attachment->post_excerpt;
    $desc = $attachment->post_content;
    $output .= '<li>';
    $output .= '<img src="' . $link_big[0] . '" width="' . $link_big[1] . '" height="' . $link_big[2] . '" alt="' . $alt . '" />';
    if (!empty($alt) || !empty($desc)) {
    $output .= '<div class="photodesc">';
    if (!empty($alt))
    $output .= '<h2>' . $alt . '</h2>';
    if (!empty($desc))
    $output .= $desc;
    $output .= '</div>';
    }
    $output .= '</li>';
    }
    return $output;
    }


    function puregallery_horizontal_order($includeArr, $id, $exclude, $videos) {
    global $post, $wp_locale;
    static $instance = 0;
    $instance++;
    $id = intval($id);
    $includeArray = explode(', ', $includeArr);
    $i = 0;
    $output = '';


    foreach ($includeArray as $elid) {
    if (substr($elid, 0, 3) === 'vid') {
    $vid = substr($elid, 4);
    $output .= '<li>';
    $output .= $videos[0][$vid];
    $output .= '</li>';
    } else {
    $sizetype = get_option(PPTNAME . '_gallery_size');
    if ($sizetype == 'yes') {
    $link_big = wp_get_attachment_image_src($elid, 'full', false);
    } else {
    $link_big = wp_get_attachment_image_src($elid, 'slider-big', false);
    }


    $metadata = wp_get_attachment_metadata($elid);
    $attachment = get_post($elid);


    $alt = $attachment->post_excerpt;
    $desc = $attachment->post_content;
    $output .= '<li class="video">';
    $output .= '<img src="' . $link_big[0] . '" width=350px"' . $link_big[1] . '" height="' . $link_big[2] . '" alt="' . $alt . '" />';
    if (!empty($alt) || !empty($desc)) {
    $output .= '<div class="photodesc">';
    if (!empty($alt))
    $output .= '<h2>' . $alt . '</h2>';
    if (!empty($desc))
    $output .= $desc;
    $output .= '</div>';
    }
    $output .= '</li>';
    }
    }
    return $output;
    }


    /*
    * Count number of active photos added to post
    */


    function gallery_count($id, $exclude) {
    global $post, $wp_locale;
    static $instance = 0;
    $instance++;
    $id = intval($id);
    $order = '';
    $orderby = '';
    if (!empty($exclude)) {
    $exclude = preg_replace('/[^0-9,]+/', '', $exclude);
    $attachments = get_children(array('post_parent' => $id, 'exclude' => $exclude, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
    } else {
    $attachments = get_children(array('post_parent' => $id, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));
    }


    if (empty($attachments))
    return '';


    return sizeof($attachments);
    }


    /*
    * Get first photo from attachments
    */


    Hoffe das reicht. Wie gesagt, ich kenne mich nicht aus.

    Das hat nichts mit CSS zu tun - hier wird jQuery verwendet, um die Beschreibung auf dem Bild auszublenden. Macht aus meiner Sicht auch Sinn, da ich so das Bild ohne die störende Beschreibung betrachten kann.

    Der entsprechende Code steht in der custom.js drin.

    Einfache Lösung:

    CSS
    #slideshow li div.photodesc {
opacity: 1 !important;
}

    Super, danke. Das funktioniert schonmal. Jetzt gibt es noch das kleine Problem, dass der Bereich von dem div container vergrößert werden müsste.
    Der Text wird nur angezeigt wenn man ihn genau trifft. Hätte gerne, dass er erscheint wenn man auf das Bild kommt.
    Vielen Dank schonmal für die schnelle Hilfe.

    Da ist jQuery Dein Freund.

    Ungetestet:

    Code
    $('li.video').mouseover(function() {
  $(this).find('div.photodesc').fadeToggle();
});

    Siehe jQuery-Dokumentation. :)

    Du kannst das in die custom.js des Themes schreiben.

    Am besten innerhalb von $(document).ready( function().

    Ansonsten füge das hier mal ganz am Anfang der custom.js ein:

    Code
    (function($) {
	$(document).ready( function() {
		$('li.video').mouseover(function() {
		  $(this).find('div.photodesc').fadeToggle();
		});
	});
})(jQuery);

    Testen solltest Du das dann im Chrome oder im Firefox und dort die Console für Fehlermeldungen öffnen.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden