css 实现title效果

最新推荐文章于 2025-06-21 11:36:42 发布

Fisher_yu01

最新推荐文章于 2025-06-21 11:36:42 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Fisher_yu01/article/details/90138471

本文详细解析了一段结合HTML和JavaScript的代码实例，展示了如何使用CSS进行元素样式设定，通过JavaScript实现DOM操作与数据处理。代码中包含了HTML结构定义、CSS样式设置以及JavaScript逻辑处理，实现了对输入框关联提示信息的显示与隐藏，并通过JavaScript遍历数组进行数据筛选。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>

       <style type="text/css">

           .my-title-content{
               display: none;
               width:150px;
               position:absolute;
               top:25px;
               left:5px;
               background:#F7F7F7;
               border: 1px solid #666;
               color:#666;
               word-break: break-all;
               word-wrap: break-word;
               padding:5px;
           }


           [my-title]:hover + .my-title-content{
               display: block;
           }
       </style>

   </head>
   <body>
       <div style="position: relative;">
           <input my-title type="text" />
           <div class="my-title-content">111111111111111111111111111111111111</div>
       </div>

   <script type="text/x-javascript">

       let resourceList = [
           {
               code:1,
               name:"fish"
           },
           {
               code:2,
               name:"cat"
           },
           {
               code:3,
               name:"chiken"
           },
       ];

       var codeList = [1,2];


       var resourceNameList = [];

       resourceList.forEach(item => {
           if(codeList.indexOf(item.code) > -1){
               resourceNameList.push(item.name);
           }
       });

       console.log(resourceNameList.toString());



   </script>

   </body>
</html>