Wie man Bild im div zeigt, irgendein Element überhoben?

Question

Ich möchte den Effekt, der hier ist https://jumpshare.com/ in dem Abschnitt "Capture und alles schnell teilen", wenn Sie den linken Text, in der rechten blcok erscheint anderes Bild neu erstellen. Ich weiß es zu tun, wenn das Element im gleichen Block ist, aber wie kann ich es machen, wenn sie in den separaten Divs sind?

Ich versuchte dies:

<div href="#" class='text'> 
    Hover me 
</div> 
<div class='image'> 
    Show me 
</div> 

image{ 
    display: none; 
} 
.text:hover .image{ 
    display: block; 
} 

Answer 1

Die Website eine separate CSS-Klasse aufgelistet verwendet, die jedem div hinzugefügt wird, wenn der Benutzer schwebt. Sie betitelten ihre Klasse "ausgewählt". Im Folgenden erfahren Sie, wie Sie mithilfe von jquery Klassen hinzufügen und entfernen, um diesen Effekt zu erzielen.

CSS

Erstellen Sie zunächst die Stylings Sie möchten Ihre div anzuwenden, wenn jemand darüber bewegt:

.selected { 
    background-color: lightblue; 
    color: blue; 
    font-weight: 700; 
} 

jquery

Dann machen Sie eine jquery Funktion für das Schweben auf jedem div, das die "ausgewählte" Klasse beim Schweben anwendet und es entfernt, wenn Sie auf anther div zeigen.

$('.hoverdivs div').on('hover', function() { 
    var selected = $('.hoverdivs div.selected'); 
    selected.removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

HTML

Und hier ist es, was die HTML wie für meine hypothetische Code aussieht:

<div class="hoverdivs"> 
    <div class="hoverdiv1"> 
    </div> 
    <div class="hoverdiv2"> 
    </div> 
    <div class="hoverdiv3"> 
    </div> 
    <div class="hoverdiv4"> 
    </div> 
</div> 

Seien Sie sicher, dass Ihre ursprüngliche Formatierung auf die divs zu übernehmen und sie mit Inhalt füllen! Hoffe das hilft.

Answer 2

Lösung No.1 es CSS zu verwenden:

.text:hover + .image { 
    display: block; 
} 

+ bedeutet I Nachbar Selektor nennen, die neben dem Gegenstand Element das Element auswählt. Note: this only works if the elements sits beside each other.

Lösung Nr. 2 ist zu verwenden JavaScript | jQuery:

// when pointer hovers the element 
document.querySelector(".text").addEventListener("mouseenter", function() { 
    document.querySelector(".image").style.display = "block"; 
}); 

// when pointer leaves the element 
document.querySelector(".text").addEventListener("mouseleave", function() { 
    document.querySelector(".image").style.display = "none"; 
}); 

// jQuery: onenter 
$(".text").on("mouseenter", function() { 
    $(".image").css("display", "block"); 
}); 

// jQuery: onleave 
$(".text").on("mouseenter", function() { 
    $(".image").css("display", "none"); 
}); 

da Sie eine Funktion in Ihrem Beispiel Webseite kopieren versuchen, sollten Sie mehrere Event-Listener anhängen, die verschiedene Bilder angezeigt werden soll.

Hoffnung, das hilft.