Question

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

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

Answer 1

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 example

Answer 2

试试这个：

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

Answer 3

什么？

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

只是做：

#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 4

例如：

$('#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 5

你应该使用class

添加border-radius

.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")
            });
        });

如何使用jquery在悬停时更改div的border-radius？

7 个答案: