CSS 样式学习神器

T_AI

已于 2022-01-25 16:14:31 修改

阅读量374

点赞数

文章标签： css

于 2021-12-30 23:36:22 首次发布

本文链接：https://blog.csdn.net/qq_44378557/article/details/122247055

版权

学css样式时,一个个切换查看效果是不是很痛苦?

一个html解决你的所有烦恼.

鼠标移入显示不同样式,移出恢复默认样式

<!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>CSS学习神器 以border-style为例</title>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    h3 {
      text-align: center;
    }

    .myButton {
      display: flex;
      flex-wrap: wrap;
    }

    button {
      width: 120px;
      height: 80px;
      margin: 20px;
      border: 4px solid red;
    }
  </style>

</head>

<body>
  <h3 class="study"></h3>
  <div class="myButton border"></div>
</body>
<script>
  $(function () {
    /* 数字开头的注释为原理说明;字母开头的注释为使用说明
       可以先在浏览器中打开,体验一遍效果,满意再自己设置   
    */
    //  1.设置border-style为研究的属性
    // A.将41行的border-style改成你想研究的属性
    let attr = "border-style"
    // 设置大标题
    $(".study").text(attr)
    // 2.设置默认样式为solid
    // B.把46行的solid换成你想研究的属性的一个默认值,用来对比参照
    let defaultStyle = "solid"
    // 3.把border-style的所有取值组成一个数组
    // C.把研究属性的所有取值用引号包起来,逗号隔开,放入50行至57行的[]中,[]中的原有数据清除
    let arr = [
      "dotted",
      "solid",
      "double",
      "dashed",
      "groove",
      "ridge",
      "inset",
      "outset"
    ]
    let html = ""

    // 3.生成标题和等量的button
    $.each(arr, function (index, value) {
      html += `<button>
                     <h5>${index}</h5>
                     <h5>${value}</h5>
               </button>`
    })
    $(".border").html(html)
    // 4.鼠标移入添加各自的样式
    $('.border button').each(function (index) {
      $(this).mouseenter(function () {
        $(this).css(attr, `${arr[index]}`)
      })
    })
    // 5.鼠标移除button恢复默认样式
    $('.border button').mouseleave(function () {
      $(this).css(attr, defaultStyle)
    })
  }
  )
</script>

</html>

border-style 的最终成果如图（鼠标移入显示不同样式,移出恢复默认样式）