内向♛男孩卍 2022-01-05 17:25 采纳率: 50%
浏览 49

刚接触HTML5这个问题不知道怎么开始

img

  • 写回答

1条回答 默认 最新

  • 归来巨星 新星创作者: 前端开发技术领域 2022-01-05 17:40
    关注

    img

    <!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>
    评论

报告相同问题？

问题事件

  • 创建了问题 1月5日