Ich bin ein Anfänger der Codierung und das ist der erste Beitrag für mich.Wie kann ich Pseudo-Elemente aktiv halten
Ich konnte Link-Buttons machen, die ich mochte, bis auf eine Sache, die ich brauchte, um eine Maus nach unten zu drücken, um den gewünschten Effekt zu erzielen. Ich meine, wenn ich es klicke, kommen alle Effekte zurück und das ist nicht was ich will. Ich möchte den Effekt stoppen und zu einer verlinkten Seite springen. Ich möchte, dass der Effekt durch Klick beendet und stabilisiert wird.
Obwohl ich den einfachen Weg, es zu beheben, war eine .active-Klasse mit JQuery hinzufügen, aber Pseudo-Elemente können nicht von JQuery ausgewählt werden und scheint wirklich kompliziert für mich. Ich möchte nur "ul li: vor, ul li: nach, ul li .fa" zu haben .active, ich will nicht andere Elemente wie "ul li .fa" zu haben .active.
Es tut mir leid für meine schlechte Erklärung. Allerdings würde ich mich freuen, wenn Sie mir wünschen könnten, das fertige Ergebnis zu zeigen.
@charset "utf-8";
body {
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
ul li { /*black border*/
list-style: none;
position: relative;
width: 120px;
height: 120px;
background: #fff;
margin: 0 20px;
border: 2px solid #262626;
box-sizing: border-box;
border-radius: 50%;
transition: .5s;
}
ul li .fa { /*arrengement of icons*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(1);
font-size: 48px;
color: #262626;
}
ul li:hover .fa { /*make icons white when hovered*/
color: #fff;
transition: .5s;
}
ul li:before { /*pink circles invisible due to opacity:0*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e91e63;
border-radius: 50%;
transform: scale(1);
opacity: 0;
}
ul li:hover:before { /*show pink circles when hovered*/
opacity: 1;
transform: scale(.8);
transition: .5s;
}
ul li:after { /*dotted borders invisible due to opacity:0*/
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border-radius: 50%;
transform: scale(0);
opacity: 0;
/* border: 2px dashed #262626; */
box-sizing: border-box;
border-top: 2px dashed #262626;
border-right: 2px dashed #262626;
border-left: 2px dashed #262626;
border-bottom: 2px dashed #262626;
}
ul li:hover:after { /*display and rotate dotted borderes when hovered*/
opacity: 1;
animation: rotateborder 10s linear infinite;
}
@keyframes rotateborder {
0% {
transform: scale(0.92) rotate(0deg);
}
100% {
transform: scale(0.92) rotate(360deg);
}
}
ul li:active:before, ul li:active .fa { /*sublimate pink circles and icons when clicked*/
transform: scale(20);
opacity: 0;
transition: 0.2s;
}
ul li:active:after { /*dipslay and rotate dotted borders when clicked*/
opacity: 1;
animation: spin 1s linear ;
border-bottom: none;
border-right: none;
border-left: none;
}
@keyframes spin {
0% {
transform: scale(0.92) rotate(0deg);
}
100% {
transform: scale(0) rotate(1500deg);
}
}
main { /*overflow:hidden so that icons don't disturb the size of the window because of its expansion when clicked*/
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<main>
<ul>
<li><a href="#"><i class="fa fa-gift" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-glass" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-globe" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-heart" aria-hidden="true"></i></a></li>
</ul>
</main>
<footer>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- <script>
$("li").click(function() {
$(this).addClass("active");
});
</script> -->
</body>
</html>
die Klasse hinzufügen (zum Beispiel: '.active') an das Aufnahmeelement statt; In diesem Fall das Listenelement, und deklarieren Sie Ihre Selektoren wie folgt: 'ul li.active:before, ul li.active .fa' – UncaughtTypeError
Warten Sie! Was? "_Unclick_" Wie kann ich so etwas machen? – Teemu
Hallo Danke für Ihre Antworten. Ich war jedoch nicht spezifisch genug. Wenn Sie auf das Symbol für Sekunden klicken, dann ist nur noch schwarzer Rand übrig und alles andere ist weiß. Das ist was ich will und ich möchte, dass es bleibt, bis die Seite auf die verlinkte Seite springt. Was ich nicht mag ist, dass Pink und das Icon wiederkommen. Normalerweise klickt der Benutzer für weniger als 0,1 Sekunden auf den Link. Aber wenn das der Fall ist, möchte ich, dass die Animation abgeschlossen wird, bis nur noch schwarzer Rand und Weiß übrig sind. – Ricky