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

【问题标题】：How to change the border-radius of a div on hover using jquery?如何使用jquery更改悬停时div的边框半径？
【发布时间】：2011-11-21 16:36:05
【问题描述】：

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

我还应该在悬停函数中添加什么来更改边框半径属性？

【问题讨论】：

说真的..为什么要在悬停时应用边框半径如果元素首先隐藏？（隐藏的元素通常什么都不显示..）

标签： jquery css hover

【解决方案1】：

例如：

$('#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();
    }
)

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

它不工作 jsFiddle .. 在 FF、Chrome 和 Opera 中测试
感谢 deepeshk ！有效。您的回答简单有效！
请记住，您可以在 jquery $('menulist').show().css('border-radius', '25px'); 中链接请求，您无需尝试在上面的行中找到您已经找到的元素。
@Teneff 它是工作伙伴。在这里试试：jsfiddle.net/deepeshk/w4BJV 你没有包含 menulist div。
@voigtan 是的，我知道。只是为了简单而尝试，以便 tahul 能够理解 :)

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

什么？

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

只要做：

#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;
}

【讨论】：

【解决方案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');

希望对你有帮助！

【讨论】：

【解决方案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")
            });
        });

【讨论】：