Ich würde gerne ein Pseudo Element sichtbar machen, da es mit einem anderen Element verknüpft ist. Es geht dabei konkret um so kleine Tooltip Elemente, die ich erstellen wollte. Die sollen dann ebend eingeblendet werden, wenn ich auf etwas klicke aber wie spreche ich das dann an? So sehen meine beiden Arrow Boxen (Box mit einem Pfeil) aus:
.toolstrip-down-arrow
{
position: relative;
}
.toolstrip-down-arrow:after
{
width: 210px;
height: auto;
bottom: 26px;
left: 20%;
padding: 5px 12px;
position: absolute;
background: black;
border-radius: 10px;
color: #fff;
content: attr(title);
}
.toolstrip-down-arrow:before
{
width: 5px;
border: solid;
border-color: black transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
}
.toolstrip-up-arrow
{
position: relative;
}
.toolstrip-up-arrow:after
{
width: 210px;
height: auto;
top: 28px;
left: 15%;
padding: 5px 12px;
position: absolute;
background: black;
border-radius: 10px;
color: #fff;
content: attr(title);
}
.toolstrip-up-arrow:before
{
width: 5px;
border: solid;
border-color: black transparent;
border-width: 0px 6px 6px 6px;
top: 22px;
content: "";
left: 35%;
position: absolute;
}und das ist dann mit einem Link verknüpft, da wo dann nachher der Tooltip angezeigt werden soll:
<li><a href="edit-entry.php" id="edit" class="toolstrip-down-arrow" title="Hier kann ein Eintrag bearbeitet werden.">bearbeiten</a>Wenn ich das jetzt oben mit in .toolstrip einbaue, also display: none; dann wird ja auch der Link ausgeblendet (als Nebeneffekt) und das will ich ja ebend nicht. Wenn ich aber display: none; in die beiden pseudo Klassen mit einbaue, dann ist ja weder der Pfeil noch die Box sichtbar aber wie blende ich die dann ein? Ein kleines Problem habe ich da auch noch, wenn ich jetzt beispielsweise über diesen "Tooltip" gehe, dann hat der auch den hover effekt, auch als Nebeneffekt. Daraufhin habe ich mich dann mal erkundigt. Anscheinend kann man ja das Verhalten mit pointer-events: none; deaktivieren aber mein Editor zeigt mir das Rot an obwohl das ja anscheinend funktioniert?
Die andere Frage, die ich mir auch stelle. Kann man diese Boxen dann evtl. noch so ein wenig "wackeln" lassen? Leider kann ich das nicht so gut beschreiben aber ich will das in etwa so haben, wie es bei mac der Fall ist, wenn man das Fenster bewegt. Das soll allerdings nur so für ca. 2 Sekunden oder so passieren. Zeitgleich mit dem einblenden der Tooltips.
Irgendwie scheint mir der Code oben auch ein wenig repetitiv, kann man das evtl. noch ein wenig verbessern? Mir fällt leider im Moment keine bessere Idee ein.