首页 新闻 搜索 专区 学院

JQuery如何操作CSS伪类:hover

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

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

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

{

border:1px solid #FFA500;

}

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

轶寒的主页 轶寒 | 初学一级 | 园豆:10
提问于: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
龙行天涯 | 小虾三级 |园豆:1821 | 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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册