CSS - Rollover-einem element, und stellen ein weiteres element sichtbar

In CSS ist es möglich, dass wenn ich den rollover ein element ist, mache ich ein weiteres element sichtbar? Ich habe ein Symbol, und wenn jemand die Maus über es, ich will es sichtbar zu machen und ein text-element, das beschreibt, was das Symbol bedeutet.

InformationsquelleAutor Kyle | 2010-05-05
  1. 20

    Hier ist ein CSS-tooltip ich die ganze Zeit 🙂 Funktioniert Super, sogar im IE. 

    a:hover {
background:#ffffff; 
text-decoration:none;
} 
/*BG color is a must for IE6*/

a.tooltip span {
display:none; 
padding:2px 3px; 
margin-left:8px; 
width:130px;
}

a.tooltip:hover span{
display:inline; 
position:absolute; 
background:#ffffff; 
border:1px solid #cccccc; 
color:#6c6c6c;
}

Easy 

<a class="tooltip" href="#">
Tooltip
<span>T his is the crazy little Easy Tooltip Text.
</span>
</a>

    Hoffe, es hilft.

    • hier ist die fiddle jsfiddle.net/c0owz9qb
    • das ist genial! Noch funktioniert, im Jahr 2019, auch können Sie fügen Sie jede Art von html-Elementen.
    InformationsquelleAutor Kyle
  2. 6

    Kannst du machen, Kind-Elemente sichtbar, indem man die Maus auf dem übergeordneten (wie Hunter schlägt), oder Geschwister:

    span:hover + span {display: block; }

    Gibt es vielleicht einige leichte cross-browser-Kompatibilität Probleme, aber mit einem gültigen doctype-ich denke, IE7+ ist okay für Geschwister-Selektoren (allerdings habe ich nicht versucht zu testen, dass die Theorie).

    InformationsquelleAutor David Thomas
  3. 3

    sicher, es ist!

    .me:hover span { display: block; }

    Wenn Sie zeigen wollen, ein element, das nicht ein Kind des Elements schwebte Sie möglicherweise verwenden müssen javascript

    InformationsquelleAutor hunter
  4. 1

    Hier eine kleine Watsche-zusammen Beispiel, dass funktioniert nicht bei IE...

    <html>
<head>
<style>
    div.tooltip
    {
        margin-top: 16px;
        margin-left: -1px;
        position: absolute;
        border: 1px solid black;
        background-color: blue;
        color: yellow;
        display: none;
    }
    div.icon
    {
        width: 16px;
        height: 16px;
        border: 1px solid blue;
        background-color: cyan;
    }
    div.icon:hover .tooltip
    {
        display: block;
    }
</style>
</head>
<body>
    <div class="icon">
        <div class="tooltip">This is what the icon does.</div>
    </div>
</body>
</html>

    Aber Sie sollten wirklich einfach jQuery verwenden.

    InformationsquelleAutor JC Ford
  5. 0

    Einverstanden mit der JavaScript-Empfehlung. Speziell jQuery ist einfach und die meisten geeignet für Seiten-Verhalten-Logik. Ich denke, dass CSS sollte nur sehen/empfinden/Stil...Javascript werden sollten, wurden alle Ihre event-und-Verhalten-Logik ist.

    InformationsquelleAutor Steven Dorfmeister
Schreibe einen Kommentar