Markieren Sie das nächste Element des Klassennamens des letzten Elements - CSS3

Unter Verwendung von Code kann ich das Element mit den Werten 2 und 3 anstelle von Element 3 hervorheben. Ich habe versucht, das letzte Kind und den n-ten Typ zu verwenden funktionieren wie erwartet. Problem ist, mit Hervorhebung unmittelbares nächstes Elements der Klasse - aktiv und gelten blinkt beiden Häkchen von 3 und dem Wert 3 und dem Wechsel der aktiven Klasse blinktMarkieren Sie das nächste Element des Klassennamens des letzten Elements - CSS3

Lösung Keines JQuery zu ändern, wie sie derzeit zu implementieren versuchen, mit CSS3

ich versuche, ohne aktive Klasse mit CSS erste Element der Klasse hightlight wählen nur

HTML:

<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

</head> 
<div class="steps" style="width:26%;float:left"> 
     <div class="stepSection"> 
<table> 
      <tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr> 
      <tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr> 
      <tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr> 
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr> 
     </table> 
     </div> 
     </div> 

    <div style="width:2%;float:left;"> 
      <div class="highlight active">1</div> 
      <div class="highlight active">2</div> 
      <div class="highlight">3</div> 
      <div class="highlight">4</div> 
     </div>

CSS3:

.highlight{ 
    color:white; 
    width:20px; 
    height:20px; 
    border-radius:50%; 
    background: rgb(234,116,0); 
    display: inline-block; 
    text-align: center; 
} 

.active{ 
    background:green; 
} 

@keyframes blink { 
to { background: rgb(234,116,0); } 
} 

.active + .highlight{ 
color: white; 
background: white; 
animation: blink 2s steps(2, start) infinite; 
}

Quelle

2017-02-24 divya reddy

sieht ein bisschen wie Sie die glyphicon Klasse verwendet zu viele Male ... Auch kannst du ma Kannst du deine Frage ein wenig klären? Es ist schwer zu verstehen, wonach du verlangst. – Matt

Matt, Ich versuche, das nächste Element der Klasse aktiv blinkend, wenn value1 Element aktiv ist, blink 2, und wenn value2 Element, dann blink 3, kurz ich versuche, das erste Element der Klasse highlight ohne aktive Klasse zu wählen CSS nur –

Methode 1: JQuery Sie können es jquery wie mit tun so

$(".active:last").next().addClass("blink")

Und Ihre css ändern

.blink { 
color: white; 
background: white; 
animation: blink 2s steps(2, start) infinite; 
}

Working Js fiddle

Methode 2 Blink Klasse haben : Wenn Sie nur tun wollen, dass es mit CSS, müssen Sie buchen halten Sie Ihre letzte Element durch eine Klasse auf das letzte Element Hinzufügen sagen .last

<div style="width:2%;float:left;"> 
    <div class="highlight active">1</div> 
    <div class="highlight active last">2</div> 
    <div class="highlight">3</div> 
    <div class="highlight">4</div> 
</div>

und führen Sie dann css Sie wie

.last + .highlight { 
    color: white; 
    background: white; 
    animation: blink 2s steps(2, start) infinite; 
}

Methode 3:

Änderung Ihrer CSS

div.active + div:not(.active){ 
    color: white; 
    background: white; 
    animation: blink 2s steps(2, start) infinite; 
    }

Im Grunde findet es das Element mit der Klasse, die davor aktiv ist und die nächste Klasse, die die Klasse nicht aktiv hat.

working jsfiddle

Quelle

2017-02-24 18:54:14 Imprfectluck

danke aber ist es in CSS3 möglich und versucht mit CSS3 und ohne jquery zu implementieren –

danke Imprefectluck, letzter funktioniert aber nochmal dafür ich brauche jquery, bei Auswahl aktive Änderungen und entsprechend wechselndes Blinken. Gibt es eine Möglichkeit, das Element 2 mit Klasse aktiv zu erhalten und blink auf 3 –

zu setzen, überprüfen Sie die letzte mit CSS3 allein, ohne jquery zu verwenden. – Imprfectluck

statt n-ten-last-Typ können Sie verwenden:

.highlight + .highlight:not(.active):nth-of-type(3) {

Snippet:

.highlight { 
 
    color: white; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    background: rgb(234, 116, 0); 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.active { 
 
    background: green; 
 
} 
 

 
@keyframes blink { 
 
    to { 
 
     background: rgb(234, 116, 0); 
 
    } 
 
} 
 

 

 

 
.highlight + .highlight:not(.active):nth-of-type(3) { 
 
    color: white; 
 
    background: white; 
 
    animation: blink 2s steps(2, start) infinite; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="steps" style="width:26%;float:left"> 
 
    <div class="stepSection"> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>1.</td> 
 
       <td><span>one</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>2.</td> 
 
       <td><span>two</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>3.</td> 
 
       <td><span>three</span></td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> 
 
       </td> 
 
       <td>3.</td> 
 
       <td><span>four</span></td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</div> 
 

 
<div style="width:2%;float:left;"> 
 
    <div class="highlight active">1</div> 
 
    <div class="highlight active">2</div> 
 
    <div class="highlight">3</div> 
 
    <div class="highlight">4</div> 
 
</div>

Quelle

2017-02-24 19:28:41 gaetanoM

Wenn ich aktive Klasse ändern, funktioniert es nicht und muss alle Bedingungen in css hinzufügen –

ja gaetonM, ich versuche, das erste Element der Klasse hightlight ohne aktive Klasse nur mit CSS zu wählen –

Markieren Sie das nächste Element des Klassennamens des letzten Elements - CSS3

Antwort

Verwandte Themen