<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<style>
.box {
width: 200px;
border: 1px solid #efefef;
}
.box_img {
width: 100%;
height: 200px;
}
.box_title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.box_price {
color: red;
}
.box_price_primary {
color: #ccc;
}
.box_price_pray {
width: 80%;
height: 30px;
margin: 5px auto;
background-color: red;
color: #fff;
text-align: center;
line-height: 30px;
font-size: 22px;
border-radius: 50px;
}
</style>
<body>
<div class="box">
<img class="box_img" src="https://profile.csdnimg.cn/7/D/C/1_qq_65103491" alt="" />
<div class="box_title ismouse">【欧洲直邮】特别好的商品 vary vary good！棒棒棒！</div>
<div class="box_price">
<span style="font-size: 12px">￥</span>
<span style="font-size: 20px">275</span>
</div>
<div class="box_price_primary">考拉价:￥629</div>
<div class="box_price_pray">立即购买</div>
</div>
<script>
var box = document.querySelector(".box");
box.onmouseover = function () {
// console.log(123)
var classVal = document.querySelector(".ismouse").getAttribute("class");
classVal = classVal.replace("box_title", "");
document.querySelector(".ismouse").setAttribute("class", classVal);
};
box.onmouseout = function () {
var classVal = document.querySelector(".ismouse").getAttribute("class");
classVal = classVal.concat(" box_title");
document.querySelector(".ismouse").setAttribute("class", classVal);
};
</script>
</body>
</html>