首页 新闻 会员 周边

JQuery如何操作CSS伪类:hover

1
悬赏园豆：40 [已解决问题] 解决于 2017-03-27 11:01

在JQuery中如何更改伪类:hover的CSS属性：

例：input[type="text"]:hover

{

border:1px solid #FFA500;

}

那么如何在JS中如何用JQuery新增或修改上面样式中的属性

轶寒的主页 轶寒 | 初学一级 | 园豆：4
提问于：2017-03-09 19:08
< >
分享
最佳答案
0 
    <style>
        input[type='text']:hover {
            border: 1px solid #FFA500;
        }

        .jqhover {
            border: 1px solid red !important;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //使用addClass方法
            $("input[type='text']").hover(function () {
                $(this).addClass("jqhover");
            }).mouseout(function () {
                $(this).removeClass("jqhover");
            })

            //使用attr方法
            /*$("input[type='text']").hover(function () {
                $(this).attr("class", "jqhover");
            }).mouseout(function () {
                $(this).attr("class", "");
            })*/
        })
    </script>
</head>
<body>
    <input type="text" />
</body>

如果还想设置什么样式就在jqhover中写。

收获园豆：40
龙行天涯 | 小虾三级 |园豆：1794 | 2017-03-10 08:57
其他回答(2)
0

可以用addClass  或者attr 直接覆盖

shawn的博客 | 园豆：243 (菜鸟二级) | 2017-03-09 19:17
0

css中的设定除非你改变目标的class，不然没法直接新增或修改。

改变你的思路，可以通过jQuery函数进行覆盖，同样可以达到你要的效果。

<!DOCTYPE html>
<html>
    <head>
        <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
        <style>
            h1:hover { color: red; }
        </style>
    </head>
    <body>
        <h1>香辣排骨</h1>
        <button>变</button>
    </body>
    <script>
        $("button").click(function() {
            $("h1").mouseover(function() {
                $(this).css("color", "green");
            });
            $("h1").mouseout(function() {
                $(this).css("color", "black");
            });
        });
    </script>

</html>
法码 | 园豆：272 (菜鸟二级) | 2017-03-10 11:24
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。