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

Question

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

在hover函数中，我应该添加什么来改变border-radius属性？

- Rahul_2289

---

说真的，如果元素一开始就被隐藏了，为什么还要在悬停时应用border-radius呢？（隐藏的元素通常不显示任何内容..） - Joonas

Answer 1

尝试这个：

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

- Bat_Programmer

---

它在jsFiddle上无法工作.. 在FF，Chrome和Opera中进行了测试。 - Teneff

谢谢deepeshk！它起作用了。你的答案简单而有效！ - Rahul_2289

记住在jQuery中可以链式请求 $('menulist').show().css('border-radius', '25px');，你不需要尝试在上一行找到已经找到的元素。 - voigtan

@Teneff，老兄，它已经可用了。请在此处尝试：http://jsfiddle.net/deepeshk/w4BJV/ 您没有包含menulist div。 - Bat_Programmer

@voigtan 是的，我知道。只是为了简单起见，让 Tahul 能够理解 :) - Bat_Programmer

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 example

- Teneff

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

- Rickard

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

- Joonas

Answer 5

你应该使用类添加 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();
    }
)

- Sanooj

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');

希望能对你有所帮助！

- Reza Baradaran Gazorisangi

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

- Abdul Basit