HTML5新属性

    <ul id="lift">
        <li data-text="推荐" data-color="#93d470"></li>
        <li data-text="图书" data-color="#f55727"></li>
        <li data-text="服装" data-color="#bc9cef"></li>
    </ul>
    <!--
    aria-              屏幕阅读机，给盲人使用
    data-自定义的属性名称         自定义属性
    -->
    <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //需求：移动到哪个li就获取文本和颜色
        //方法1：原生js
        //元素.getAttribute("data-text")
        //元素.dataset["text"]
        
        //方法2：jQuery
        //$("选择器").attr("data-text")
        //$("选择器").data("text")  【推荐】  data-后面的属性名称
        $("#lift li").on("mouseover",function () {
            //获取自定义属性的文字和颜色
            // var t=$(this).data("text");
            // var c=$(this).data("color");
            var t=$(this).attr("data-text");
            var c=$(this).attr("data-color");
            console.log("文字：",t,"颜色：",c);
            
            //设置文本和背景色
            $(this).text(t);
            $(this).css("background-color",c);
        });
    </script>