|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 wlHy 于 2023-3-3 17:12 编辑
小白,目前在自学html,在写案例的时候发现一个问题,不得其解。
问题描述:
想对.box的div标签设置一个hover,当鼠标放上去的时候能够显示子标签中的.icon-hover 和 p标签内容。
但是当我写成群组选择的时候只有.icon-hover生效了,p标签没有生效- .box:hover .icon-hover,p{
- display: block;
- }
复制代码
当我把两个拆开写的时候就都可以正常生效了,这是为什么呢?- .box:hover .icon-hover{
- display: block;
- }
- .box:hover p{
- display: block;
- }
复制代码
完整代码如下。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <style>
- *{
- margin: 0;
- padding: 0;
- }
- .container{
- width: 912px;
- height: 600px;
- margin: 0 auto;
- background: yellow;
- /* position: relative; */
- }
- .box{
- width: 275px;
- height: 275px;
- border: 6px solid #cccccc;
- position: relative;
- background: red;
- /* padding: 7px 5px; */
- }
- .box .pic{
- width: 100%;
- height: 100%;
- }
- .box .icon{
- position: absolute;
- left: 7px;
- bottom: 7px;
- }
- .box .icon-hover{
- display: none;
- }
- .box p{
- position: absolute;
- left: 0;
- top: 0;
- color: white;
- padding: 7px 5px;
- display: none;
- }
-
- .box:hover .icon-hover,p{
- display: block;
- }
- /* .box:hover p{
- display: block;
- } */
- </style>
- </head>
- <body>
- <div class="container">
- <div class="box">
- <img src="../img/026-定位案例/img001.jpg" alt="" class="pic">
- <img src="../img/026-定位案例/tu.gif" alt="" class="icon">
- <img src="../img/026-定位案例/tu2.gif" alt="" class="icon icon-hover">
- <p>
- <img src="../img/026-定位案例/logo.gif" alt="">
- <span>好好快写,写会了一会好下课。好好快写,写会了一会好下课。</span>
- </p>
- </div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </body>
- </html>
复制代码
在你的代码中,.box:hover .icon-hover,p 这一行实际上是两个选择器:.box:hover .icon-hover 和 p。这意味着当 .box 处于悬停状态时,.icon-hover 将显示,而 p 标签将始终显示。
要使其正常工作,你应该将其更改为 .box:hover .icon-hover, .box:hover p。这样,在 .box 处于悬停状态时,.icon-hover 和 p 标签都将显示。
|
|