Ich möchte ein Div anzeigen, wenn jemand den Mauszeiger über ein <a> Element, aber ich würde dies gerne in CSS und nicht in JavaScript tun. Wissen Sie, wie dies erreicht werden kann?
Antworten
Zu viele Anzeigen?
Kondal
Punkte
2623
coderH
Punkte
63
Wenn Sie diese Methode anwenden, wird das Element auch dann angezeigt, wenn Sie den Mauszeiger über das verborgene Element bewegen. Dies ist nützlich, wenn Sie auf das verborgene Element klicken möchten. Sie könnten zum Beispiel eine Löschoption sehen und darauf klicken wollen.
<style>
#delete_link {
display: none;
}
a:hover + #delete_link {
display: block;
}
#delete_link:hover{
display: block;
}
</style>
</head>
<body>
<a>Hover over me!</a>
<div id="delete_link"><a href="#">Element show on hover</a></div>
</body>
Basj
Punkte
36025
Basierend auf der Hauptantwort ist dies ein Beispiel, das nützlich ist, um einen Informationstooltip anzuzeigen, wenn man auf eine ? in der Nähe eines Links:
document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };
document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }
document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };
#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }
#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }
<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>
Dumitru Daniel
Punkte
481
Nach meinen Tests mit diesem CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}Und dieses HTML:
<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>Das Ergebnis ist, dass es sich mit der zweiten ausdehnt, aber nicht mit der ersten. Wenn also ein div zwischen dem Hover-Ziel und dem versteckten div ist, dann wird es nicht funktionieren.
Lesly Revenge
Punkte
836
Vergessen Sie nicht: Wenn Sie versuchen, den Mauszeiger um ein Bild herum zu bewegen, müssen Sie es um einen Container herum platzieren. css:
.brand:hover + .brand-sales {
display: block;
}
.brand-sales {
display: none;
}Wenn Sie mit dem Mauszeiger darauf zeigen:
<span className="brand">
<img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg"
alt"some image class="product-card-place-logo"/>
</span>Dies wird angezeigt:
<div class="product-card-sales-container brand-sales">
<div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>- See previous answers
- Weitere Antworten anzeigen
