außerhalb Elemente unsichtbar machen, html css

<body> 
 
    <div class="white"> 
 
     <table class="circleDataBack"> 
 
      <tr> 
 
       <td> 
 
        <div class="circle">A</div> 
 
        <div class="circle">B</div> 
 
        <div class="circle marked">C</div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

Und ich sollte nur die Elemente, die die Klasse

marked

haben machen

und mache alle Elemente außerhalb sichtbar. Und die Elemente, die die Klasse marked haben, sollten ihre Positionen speichern und sichtbar bleiben

Quelle

2017-01-23 Aibol

Wenn ich Sie verstanden, können Sie die 'verwenden: nicht()' Selektor - '& cir: nicht (.marked) {visibility: hidden}' – Vucko

Danke für jeder. Die Lösung mit Jquery gelöst: 'function showOnlyDots() { $ ('*'). Not ('td> div.circle.marked'). AddClass ('invis'); $ ('img'). Css ("display", "none"); $ ('div.circle') .css ("Grenze", "keine"); } ' – Aibol

Verwenden Sie Sichtbarkeit.

.circle{ 
 
    visibility: hidden; 
 
} 
 
.circle.marked{ 
 
    visibility: visible; 
 
}

<body> 
 
    <div class="white"> 
 
     <table class="circleDataBack"> 
 
      <tr> 
 
       <td> 
 
        <div class="circle">A</div> 
 
        <div class="circle">B</div> 
 
        <div class="circle marked">C</div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

Quelle

2017-01-23 11:36:59 Tom

1 Sekunde vor mir ...: D –

@Tom Danke für Ihre Antwort. Ich habe den Code ausprobiert, aber es machte nur Tabellendaten unsichtbar. Allerdings habe ich noch einen Block, der keine Beziehung zu den Tds hat. Ich habe versucht mit Jquery wie alle Elemente markiert Ausnahme markiert und unsichtbar machen: '$ (function() { $ ('*'). nicht ('td> div.circle.marked'). addClass ('invis'); }) '. Es hat auch nicht funktioniert – Aibol

Es zielt alles mit dem Klassenkreis. Setzen Sie all Ihre HTML hier und es wäre einfacher, Ihnen zu helfen. – Tom

.circle.marked {visibility:visible; } 
 
.circle{visibility:hidden;}

<body> 
 
    <div class="white"> 
 
     <table class="circleDataBack"> 
 
      <tr> 
 
       <td> 
 
        <div class="circle">A</div> 
 
        <div class="circle">B</div> 
 
        <div class="circle marked">C</div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div> 
 
</body>

Quelle

2017-01-23 11:38:43

https://jsfiddle.net/0emw0kL6/ hier ist einfach CSS-Eigenschaft, die Ihnen helfen.

<!-- CSS STARTS--> 
.circle{ 
    display:none; 
} 
.marked{ 
    display:block; 
} 
<!-- CSS STARTS--> 
<!-- HTML STARTS--> 
<body> 
    <div class="white"> 
     <table class="circleDataBack"> 
      <tr> 
       <td> 
        <div class="circle">A</div> 
        <div class="circle">B</div> 
        <div class="circle marked">C</div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 
<!-- HTML ENDS-->

Quelle

2017-01-23 11:40:14

.circle:not(.marked){ visibility: hidden; }

<div class="white"> 
 
     <table class="circleDataBack"> 
 
      <tr> 
 
       <td> 
 
        <div class="circle">A</div> 
 
        <div class="circle">B</div> 
 
        <div class="circle marked">C</div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </div>

Quelle

2017-01-23 11:42:30 Vky

danke für deine antwort. Ich habe deinen CSS-Code ausprobiert, er hat nur die Elemente innerhalb der Circle-Klasse unsichtbar gemacht, andere Elemente außerhalb der "markierten" Klasse bleiben sichtbar – Aibol

außerhalb Elemente unsichtbar machen, html css

Antwort

Verwandte Themen