.delete-img-btn { content: "×"; display: block; position: absolute; top: 0; right: 0; width: 20px; height: 20px; color: red; text-align: center; font-size: 20px; font-weight: bold; z-index: 999; }function renderImgContainer(data){ var html = ''; if(data.length == 0){ html += '<div class="layui-col-xs2">'; html += '<div class="img-box" style="text-align: center;">'; html += '<img style="width: 100px; height: 100px;" src="https://ca-1256938637.cos.ap-chengdu.myqcloud.com/school_id_1/user_id_1/20230523/%2A/none.gif">'; html += '</div>'; html += '</div>'; }else{ $.each(data,function(i,item){ html += '<div class="layui-col-xs2">'; html += '<div class="img-box" style="text-align: center;" onclick="this.classList.toggle('+"'selected"+"'"+')">'; html += '<span class="delete-img-btn"></span>' html += '<img style="width: 100px; height: 100px;" src="'; html += item.file_url; html += '"'; html += 'id="'; html += item.file_id; html += '"'; html += 'alt="图片描述"></div>'; html += '<div style="text-align: center;">'; html += '<p class="img-title" style="cursor: pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 100px;font-size: 5px;"'; html += 'data-file-url ='; html += item.file_url; html += '>'; html += item.file_name; html += '</p></div></div>'; }); } $('#img-container').append(html); imgPreview(); },鼠标放到图片上时,不出现红色叉号,请修正代码
时间: 2023-12-14 20:38:02 浏览: 33
您需要在CSS中添加以下样式来控制鼠标放到图片上时出现红色叉号:
```
.img-box:hover .delete-img-btn {
display: block;
}
```
这将使鼠标悬停在图像上时显示删除按钮。同时,您还需要为删除按钮添加以下CSS样式:
```
.delete-img-btn {
...
display: none; // 默认情况下不显示
}
```
这将使删除按钮在默认情况下不可见。
相关问题
解释一下:.collapse-btn:hover{ background: #00d1b2; }
这是一段CSS代码,它定义了一个样式规则,用于控制HTML文档中当鼠标悬停在class为"collapse-btn"的元素上时的样式。具体解释如下:
- ".collapse-btn:hover"表示选择class为"collapse-btn"的元素,在鼠标悬停在该元素上时应用该样式。
- "background: #00d1b2"指定元素的背景色为#00d1b2。
因此,当鼠标悬停在HTML文档中class为"collapse-btn"的元素上时,该元素的背景色将变为#00d1b2。
.top,.top a{color:#646464;} .top a:hover{color:#ff2832;} .top-l .top-login{color: #ff2832;margin-right: 5px;} .top-m > li{float :left;height :22px;line-height :22px;padding-top :5px;} .top-m > li.line{width:1px;height:12px;background:#e1e1e1;margin:10px 0 0;padding:0;} .top-m > li a{display:block;padding:0 8px;} .top-m li a.menu-btn{padding-right:27px;background:url(插图11/home_sprite.png) no-repeat right -307px;} .top-m li a i{margin-right :6px;margin-top:3px;}添加完整注释
/* 设置顶部导航栏样式 */
.top, .top a {
color: #646464; /* 设置顶部导航栏字体颜色为灰色 */
}
.top a:hover {
color: #ff2832; /* 当鼠标悬停在导航栏链接上时,设置字体颜色为红色 */
}
.top-l .top-login {
color: #ff2832; /* 设置登录按钮字体颜色为红色 */
margin-right: 5px; /* 设置登录按钮右侧间距为5px */
}
.top-m > li {
float: left; /* 设置导航栏子元素左浮动 */
height: 22px; /* 设置导航栏子元素高度为22px */
line-height: 22px; /* 设置导航栏子元素行高为22px */
padding-top: 5px; /* 设置导航栏子元素顶部内边距为5px */
}
.top-m > li.line {
width: 1px; /* 设置分割线宽度为1px */
height: 12px; /* 设置分割线高度为12px */
background: #e1e1e1; /* 设置分割线背景颜色为淡灰色 */
margin: 10px 0 0; /* 设置分割线上方外边距为10px,下方外边距为0 */
padding: 0; /* 设置分割线内边距为0 */
}
.top-m > li a {
display: block; /* 设置导航栏子元素链接为块级元素 */
padding: 0 8px; /* 设置导航栏子元素链接左右内边距为8px */
}
.top-m li a.menu-btn {
padding-right: 27px; /* 设置菜单按钮右侧内边距为27px */
background: url(插图11/home_sprite.png) no-repeat right -307px; /* 设置菜单按钮背景图片 */
}
.top-m li a i {
margin-right: 6px; /* 设置菜单按钮图标右侧外边距为6px */
margin-top: 3px; /* 设置菜单按钮图标上方外边距为3px */
}
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)