css 实现title效果

本文详细解析了一段结合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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值