如何使用 jquery 更改悬停时 div 的边框半径？

Question

$('#categories').hover(
    function() {
        $(this).find('#menulist').show();
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

我还应该在悬停函数中添加什么来更改 border-radius 属性？

Answer 1

试试这个：

$('#categories').hover(
    function() {
        $('#menulist').show();
        $('#menulist').css('border-radius', '25px');
    },
    function() {
        $('#menulist').hide();
    }
)

Answer 2

animateCorners = function(event) {

    r = (event.type == 'mouseenter' ? 40 : 0);
    $(this).css({
        'border-top-left-radius': r,
        'border-top-right-radius': r,
        'border-bottom-right-radius': r,
        'border-bottom-left-radius': r
    });

}
$('div').hover(animateCorners, animateCorners);

jsFiddle 示例

Answer 3

例如：

$('#categories').hover(
    function() {
        $(this).find('#menulist').show()
        .css("border-radius", 5)
        .css("-webkit-border-radius", 5)
        .css("-moz-border-radius", 5);
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

Answer 4

什么？

如果首先隐藏的元素上应该有边框半径..那么为什么要在悬停时应用边框半径？

只需执行以下操作：

#menulist{   
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

http://jsfiddle.net/bG5yt/ （也在旁注上悬停，如下所示如果你想要一些动画，那么使用 jquery 是有意义的，但因为你不...）

---

如果你真的想在悬停时执行它，你也可以这样做

#menulist:hover {
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

或

#categories:hover #menulist {
    border-radius:20px;
    -webkit-border-radius:20px;
    -o-border-radius:20px;
    -moz-border-radius:20px;
}

Answer 5

你应该使用类添加边框半径

.rad
{   border-radius:25px;
    -webkit-border-radius:25px;
    -o-border-radius:25px;
    -moz-border-radius:25px;
}


$('#categories').hover(
    function() {
        $(this).find('#menulist').show().addClass('rad');
    },
    function() {
        $(this).find('#menulist').hide();
    }
)

Answer 6

这是一个设置跨境半径的全局 jQuery 函数：

jQuery.fn.setBorderRadius = function(top, right, bottom, left) {

        //set up defaults if only one or two variables are passed in
        right = right || top;
        bottom = bottom || top;
        left = left || right;

        var borderRadiusObj = {
            '-moz-border-radius': top + " " + right + " " + bottom + " " + left,
            '-webkit-border-radius': top + " " + right + " " + bottom + " " + left,
            'border-radius': top + " " + right + " " + bottom + " " + left
        }
        return (this).css(borderRadiusObj); // to maintain chainability by returning 'this'
    };

这是一个示例：

HTML

<div id="radius"></div>

jQuery

$("#radius").setBorderRadius('5px');

它是可链接的。所以你可以按如下方式使用它：

$('#menulist').show().setBorderRadius('5px');

希望它有帮助！

Answer 7

$(document).ready(function () {
            $("#start").mouseover(function () {
                $(this).css("border-radius", "25px")
                $(this).css("transition-duration", "1s")
                $(this).css("color", "black")
                $(this).css("background-color", "skyblue")
                //$(this).css("font-family", "Arial")
                });
            $("#start").mouseout(function () {
                $(this).css("border-radius", "10px")
                $(this).css("background-color", "#454952")
                $(this).css("color", "white")
                //$(this).css("font-family", "Bantag")
            });
        });