Question

当我悬停/选择另一个时，我想隐藏Div的内容。我已经整理了一个粗略的代码来说明我想要实现的目标。

基本上我需要在手机上悬停或点击其他图片时不显示初始文字，但如果该图片悬停或再次点击则显然会再次显示..

我一直在阅读有关css选择器的内容，但我无法解决这个问题。

感谢。

Answer 1

尽管CSS语法只能选择子元素和后续兄弟元素，但可以利用flexbox属性order来首先显示元素 - 即使它实际上是后续的兄弟元素元件。

<强> e.g。

body {
display: flex;
}

section {
width: 160px;
height: 160px;
margin-right: 40px;
text-align: center;
font-weight: bold;
color: rgb(255,255,255);
background-color: rgb(255,0,0);
order: 1;
}

.initial {
order: 0;
}

.icon {
display:block;
margin: 10px auto;
width: 60px;
height: 60px;
}

p, section:hover ~ section p {
display: none;
}

.initial p, section:hover p {
display: block;
}

<section>
<div class="icon" />Hover over me</div>
<p>When this text is visible, I need the others to vanish!</p>
</section>

<section>
<div class="icon" />Hover over me</div>
<p>When this text is visible, I need the others to vanish!</p>
</section>

<section class="initial">
<div class="icon" />Hover over me</div>
<p>This is visible initially</p>
</section>

CSS隐藏和显示内容

1 个答案: