Html Onclick显示/隐藏一个只包含div的css，不包含href。没有jquery_Html_Css_Css Selectors_Css Transitions

Html Onclick显示/隐藏一个只包含div的css，不包含href。没有jquery

html css

Html Onclick显示/隐藏一个只包含div的css，不包含href。没有jquery,html,css,css-selectors,css-transitions,Html,Css,Css Selectors,Css Transitions,用户最初看到的框是带有文本“hey there and hello”的蓝色框。用户点击hello后，带有文本“how to”的灰色框占据了蓝色框的空间，hello文本变为通过css添加的“close”文本内容现在，当我点击“关闭”按钮时，灰色框再次变为不可见，蓝色框再次出现，文本为“你好”。我试过使用focus，但没用下面是我尝试使用的css。如果我能得到一些帮助就太好了。注意力不集中。只有css必须被使用。没有锚定链接或hrefs它的所有关于纯文本。蓝卡{ 高度：自动；最小高度：10

用户最初看到的框是带有文本“hey there and hello”的蓝色框。用户点击hello后，带有文本“how to”的灰色框占据了蓝色框的空间，hello文本变为通过css添加的“close”文本内容

现在，当我点击“关闭”按钮时，灰色框再次变为不可见，蓝色框再次出现，文本为“你好”。我试过使用focus，但没用

下面是我尝试使用的css。如果我能得到一些帮助就太好了。注意力不集中。只有css必须被使用。没有锚定链接或hrefs它的所有关于纯文本

。蓝卡{
高度：自动；
最小高度：100px；
显示：块；
填充：1em；
背景：#FFFFFF；
盒影：0 6px 12px 0 rgba（27,29,31,0.05）；
边界半径：10px；
位置：相对位置；
边缘底部：10px；
}
.灰色卡片{
位置：绝对位置；
身高：100%；
左：0；
排名：0；
不透明度：0；
可见性：隐藏；
z指数：10；
利润率：20px；
最大高度：155px；
溢出y：自动；
-webkit溢出滚动：触摸；
右侧填充：2米；
字体大小：14px；
线高：24px；
过渡：0.25s；
-webkit转换：0.25s；
-moz跃迁：0.25s；
变换：比例（1.4）translateY（-100px）；
-webkit转换：缩放（1.4）translateY（-100px）；
-moz变换：比例（1.4）translateY（-100px）；
}
.灰色卡片{
填充：10px；
字体大小：13px；
最小高度：100px；
}
.灰色卡片{
不透明度：1；
能见度：可见；
变换：缩放（1）平移（0）；
-webkit变换：缩放（1）平移（0）；
-moz变换：缩放（1）平移（0）；
}
.灰色卡片文本{
显示：无；
}
.蓝色框文本：焦点~灰色框{
显示：块；
}
.灰框文本：焦点~.蓝框文本{
显示：块；
}
.灰色框文本：之前{
内容：“关闭”；
字体大小：12px！重要；
}


你好
你好
如何？

使用复选框黑客有一种实现目标的技巧

参见下面的示例

#myid{
显示：无；
}
#迈拉贝尔：之后{
内容:"你好",；
}
#myid:checked~#mylabel:after{
内容:"关闭";；
}

使用复选框黑客有一种实现目标的技巧

参见下面的示例

#myid{
显示：无；
}
#迈拉贝尔：之后{
内容:"你好",；
}
#myid:checked~#mylabel:after{
内容:"关闭";；
}

您可以使用

flex

盒子技巧来更改盒子的顺序。这将使您能够双向使用相邻的同级选择器，从而解决CSS中以前没有同级选择器的问题

创意：

将包装容器设置为

display:flex

。使您的目标

div

s相对于此包装器父级绝对定位。使用

tabindex

强制

div

获得焦点。在聚焦时更改彼此的顺序以及不透明度和位置，以帮助实现

过渡

效果

示例代码片段：

*{框大小：边框框；边距：0；填充：0；字体系列：无衬线；}
.wrap{display:flex；position:relative；width:260px；}
.蓝色，.灰色{
位置：绝对位置；
宽度：120px；高度：3em；
边距：4px；填充：8px；
光标：指针；过渡：全部0.5s；
}
蓝色{
顺序：1；左侧：0；不透明度：1；
背景色：#33d；
}
格雷先生{
顺序：2；左侧：50%；不透明度：0；
背景色：#bbb；
}
.blue:focus+.gray{顺序：1；左：0；不透明度：1；}
.blue:焦点{顺序：2；左：50%；不透明度：0；}
.gray:focus+.blue{顺序：1；左：0；不透明度：1；}
.gray:焦点{顺序：2；左：50%；不透明度：0；}
.blue：：在{content:'Hello'；color:#fff；}之后
.gray：：在{content:'Close'；color:#333；}之后