使元素外看不見，HTML CSS

我有以下HTML結構：使元素外看不見，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>

，我應該讓只有誰擁有一流的元素

marked

並讓所有外面的元素都看不見。並且擁有類marked的元素應保存其位置並保持可見

來源

2017-01-23 Aibol

如果我理解你，你可以使用'：不（）'選擇 - '.circle：沒有（.marked）{visibility：hidden的}' – Vucko

感謝大家。用jquery解決了這個問題：function showOnlyDots（）{（'*'）。not（'td> div.circle.marked'）。addClass（'invis'）; $（'img'）.css（「display」，「none」）; $（'div.circle'）。css（「border」，「none」）; }' – Aibol

使用可見性。

.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>

來源

2017-01-23 11:36:59 Tom

在我之前1秒...：D –

@Tom謝謝你的回答。我試過了這個代碼，但它只是隱藏了表格數據。不過，我還有另一個與tds無關的塊。我嘗試使用jquery，如選擇所有元素異常標記，並使其不可見：'$（function（）{0 {'{'''''。''''''''''''''''。 '）。它也沒有工作 – Aibol

它的目標任何與班級圈。把所有的HTML放在這裏，幫助你會更容易。 – 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>

來源

2017-01-23 11:38:43

https://jsfiddle.net/0emw0kL6/ 這裏是簡單的CSS屬性，它會幫助你。

<!-- 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-->

來源

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>

來源

2017-01-23 11:42:30 Vky

感謝您的回答。我試過了你的css代碼，它使得隱藏的只是circle類中的元素，'marked'類以外的其他元素保持可見 – Aibol

使元素外看不見，HTML CSS

回答

相關問題