老师可以帮我看看这道题吗？谢谢老师
原图
我用火狐浏览器是下边框是白色透明的，但是我用谷歌浏览器就不行，怎么让谷歌浏览器兼容
当我选中后，鼠标再次悬浮上次的时候为什么下边框不是白色透明的？是一个完整的红色边框。。想实现的效果是当我选中后消失掉，鼠标悬浮上去，下边框是白色透明的。如何实现老师
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>增值保障</title>
<link rel="stylesheet" href="style6.css">
</head>
<body>
<div>
<div class="dd" id="dd">
<div class="sevice-type-yb clearfix">
<div class="yb-item-cat selected">
<div class="yb-item" id="ybItem">
<img class="icon" src="img/59b1f5a3Nf2341900.png">
<span class="name">无忧洗3双</span>
<span class="price">￥69</span>
<i class="arrow-icon"></i>
</div>
<div class="more-item" id="moreItem">
<ul>
<li>
<div class="title" title="3双鞋靴清洗、保养、杀菌服务">
<span class="choose-btn" id="choose-btn">
<!--<i class="sprite-checkbox" id="spriteCheckbox1"></i>-->
<input class="anniu" id="anniu" name="test" type="checkbox" value="1">
<span class="name" id="yue1">无忧洗3双</span>
<span class="price" id="yue2">￥69</span>
</span>
<a href="#" class="detail-more">
详情
<s class="s-arrow">>></s>
</a>
</div>
</li>
<li>
<div class="title" title="5双鞋靴清洗、保养、杀菌服务">
<span class="choose-btn">
<!--<i class="sprite-checkbox" id="spriteCheckbox2"></i>-->
<input class="anniu" id="anniu2" name="test" type="checkbox" value="1">
<span class="name" id="name">无忧洗5双</span>
<span class="price" id="price">￥109</span>
</span>
<a href="#" class="detail-more">
详情
<s class="s-arrow">>></s>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="yb-item-cat">
<div class="yb-item" id="ybltem">
<img class="icon" src="img/5992a59bNd253524f.png">
<span class="name">首月意外保</span>
<span class="price">￥9.9</span>
<i class="arrow-icon"></i>
</div>
<div class="more-item" id="moreltem">
<ul>
<li>
<div class="title" title="首月意外破损免费维修">
<span class="choose-btn">
<!-- <i class="sprite-checkbox"></i>-->
<input class="anniu" id="anniu3" name="test" type="checkbox" value="1">
<span class="name" id="name2">首月意外保</span>
<span class="price" id="price2">￥9.9</span>
</span>
<a href="#" class="detail-more">
详情
<s class="s-arrow">>></s>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="service-tips">
<a href="#">
<i class="sprite-question"></i>
</a>
<div class="tips">
<div class="sprote-arrow"></div>
<div class="content">
<dl>
<dd>
增值保障是指凡在京东购买商品或服务的消费者，在保障期间内遇到无论是正常使用中的问题还是意外事故，即可享受增值保障服务。保障内容包括：延长保修、只换不修、意外保护、服务保障。覆盖家电、手机数码、电脑办公、汽车用品、服饰家居等商品。
</dd>
</dl>
<p>
增值保障服务，只能提供增值税普通电子发票，如有疑问，请与
<a href="#">在线客服</a>联系
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script6.js"></script>
</body>
</html>
var anniu = document.getElementById("anniu");
var anniu2 = document.getElementById("anniu2");
var anniu3 = document.getElementById("anniu3");
var ybItem = document.getElementById("ybItem");
/*var classVal = document.getElementById("moreItem").getAttribute("ybItem");*/
var moreItem = document.getElementById("moreItem");
var ybltem = document.getElementById("ybltem");
var moreltem =document.getElementById("moreltem");
let isInsideHead = false;
let isInsideMore = false;
anniu.addEventListener(
"click",
function() {
isInsideHead = false;
isInsideMore = false;
document.getElementById("yue2").style.color = "#E2231A";
document.getElementById("yue1").style.color = "#E2231A";
document.getElementById("moreItem").style.display="none";
document.getElementById('ybItem').classList.add('red-border');
},
false
);
anniu2.addEventListener(
"click",
function() {
isInsideHead = false;
isInsideMore = false;
document.getElementById("name").style.color = "#E2231A";
document.getElementById("price").style.color = "#E2231A";
document.getElementById("moreItem").style.display="none";
document.getElementById('ybItem').classList.add('red-border');
},
false
);
anniu3.addEventListener(
"click",
function() {
isInsideHead = false;
isInsideMore = false;
document.getElementById("name2").style.color = "#E2231A";
document.getElementById("price2").style.color = "#E2231A";
document.getElementById("moreltem").style.display="none";
document.getElementById('ybltem').classList.add('red-border');
},
false
);
ybItem.addEventListener(
"mouseenter",
function() {
console.log(`ybItem mouseenter`);
isInsideHead = true;
isInsideMore = false;
document.getElementById("moreItem").style.display = "block";
},
false
);
ybItem.addEventListener(
"mouseleave",
function() {
console.log(`ybItem mouseleave`)
isInsideHead = false;
setTimeout(function() {
// 如果已经移到更多里面，则阻止它关闭
if (!isInsideMore) {
document.getElementById("moreItem").style.display = "none";
}
}, 500);
},
false
);
moreItem.addEventListener(
"mouseenter",
function() {
isInsideHead = false;
isInsideMore = true;
document.getElementById("moreItem").style.display = "block";
},
false
);
moreItem.addEventListener(
"mouseleave",
function() {
isInsideMore = false;
setTimeout(function() {
// 如果已经移到更多里面，则阻止它关闭
if (!isInsideHead) {
document.getElementById("moreItem").style.display = "none";
}
}, 500);
},
false
);
/*classVal = classVal.concat("moreItem");
document.getElementById("moreItem").setAttribute("ybItem", classVal);*/
/*
ybItem.addEventListener('mouseleave',function () {
document.getElementById("moreItem").style.display="none";
}, false);*/
ybltem.addEventListener(
"mouseenter",
function() {
console.log(`ybItem mouseenter`);
isInsideHead = true;
isInsideMore = false;
document.getElementById("moreltem").style.display = "block";
},
false
);
ybltem.addEventListener(
"mouseleave",
function() {
console.log(`ybItem mouseleave`)
isInsideHead = false;
setTimeout(function() {
// 如果已经移到更多里面，则阻止它关闭
if (!isInsideMore) {
document.getElementById("moreltem").style.display = "none";
}
}, 500);
},
false
);
moreltem.addEventListener(
"mouseenter",
function() {
isInsideHead = false;
isInsideMore = true;
document.getElementById("moreltem").style.display = "block";
},
false
);
moreltem.addEventListener(
"mouseleave",
function() {
isInsideMore = false;
setTimeout(function() {
// 如果已经移到更多里面，则阻止它关闭
if (!isInsideHead) {
document.getElementById("moreltem").style.display = "none";
}
}, 500);
},
false
);
*{
margin: 0;
padding: 0;
}
body{
font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
margin-top: 30px;
color: #666;
}
.dd{
width: 520px;
margin: auto;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.sevice-type-yb .yb-item-cat{
float: left;
position: relative;
}
.sevice-type-yb .yb-item-cat .yb-item{
padding:4px 5px 4px 6px;
margin: 0 7px 2px 0;
border: 1px solid #ccc;
line-height: 20px;
position: relative;
font-size: 0;
cursor: pointer;
z-index: 3;
}
.yb-item .icon{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 4px;
}
img{
border: 0;
vertical-align: middle;
}
.yb-item .name{
font-size: 12px;
margin-right: 4px;
vertical-align: middle;
max-width: 60px;
height: 20px;
overflow: hidden;
display: inline-block;
}
.yb-item .price{
margin-right: 5px;
vertical-align: middle;
font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}
.sevice-type-yb .yb-item-cat:hover .arrow-icon{
background-position: -2px -38px;
}
.yb-item .arrow-icon{
display: inline-block;
width: 15px;
height: 10px;
vertical-align: middle;
background: url("img/service-icon.png") -2px -1px;
}
.sprite-question{
display: inline-block;
vertical-align: -10px;
width: 16px;
height: 16px;
background-image: url("img/__sprite.png");
background-position: 0 0;
}
.service-tips{
position: relative;
height: 30px;
}
.service-tips .tips{
z-index: 2;
width: 270px;
position: absolute;
/* left: 581px;
top: 66px;*/
right: 178px;
top:36px;
display: none;
}
.service-tips .tips .sprote-arrow{
width: 11px;
height: 6px;
background-image: url("img/__sprite.png");
background-position: -14px -16px;
position: absolute;
overflow: hidden;
left: 218px;
top: -5px;
}
.service-tips .tips .content{
padding: 10px;
background: #fff;
border: 1px solid #cecbce;
color: #666;
box-shadow: 0 0 2px 2px #eee;
}
.service-tips .tips .content dd{
line-height: 170%;
}
.service-tips .tips .content p{
border-top: 1px dotted #999;
margin-top: 7px;
padding-top: 7px;
}
.service-tips .tips .content p a{
color: #5e69ad;
margin: 0 5px;
}
.service-tips:hover .tips{
display: block;
}
.sevice-type-yb .yb-item-cat .more-item{
display: none;
position: absolute;
top: 29px;
background-color: #FFF;
border:1px solid #DDD;
padding: 10px 0 5px 10px;
width: 240px;
overflow: hidden;
z-index: 1;
}
ul li{
margin-bottom: 10px;
}
ul li .title{
height: 16px;
}
.sprite-checkbox{
width: 14px;
height: 14px;
background-image: url("img/__sprite.png");
background-position: 0 -16px;
}
.sprite-checkbox{
display: inline-block;
vertical-align: -3px;
margin-right: 6px;
width: 14px;
height: 14px;
background-image: url("img/__sprite.png");
background-position: -16px 0;
}
ul li .title .price{
margin-right: 0;
margin-left: 3px;
}
ul li .name{
margin-left: -4px;
}
.detail-more {
display: none;
margin-left: 8px;
color: #5e69ad;
}
.s-arrow{
font-family: SimSun;
text-decoration: none;
}
/*.yb-item-cat:hover .more-item{
display: block;
}
.title:hover .detail-more{
display: inline-block;
}*/
.sevice-type-yb .yb-item-cat:hover .yb-item{
border: 1px solid #e3393c;
border-bottom-color: #fff;
}
.title span:hover{
color:#e3393c;
}
a:hover{
color: #E2231A;
}
.service-tips .tips .content p a:hover {
color: #e4393c;
}
.yb-item {
border: 1px solid #E3393C;
}
.more-item .anniu{
width: 15px;
height: 15px;
vertical-align: -4px;
margin-right: 5px;
background-color: #c81623;
}
.red-border {
border: 1px solid #E3393C !important;
正在回答
同学你好，可以设置一个标志，判断这个标志状态再修改样式，给你举个例子：
自己试一试，后面也按照这个思路来写就可以。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星