使元素外看不见，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

回答

相关问题