Question

悬停时是否可以在按钮内画圆圈？我知道我可以通过使用一些div元素和JS来实现它，但也许还有另一种更简单的方法吗？

input[type=submit] {
    width: 101px; height: 16px;
    background-color: #f68830;
    webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
    border: none; cursor:pointer;
}

Answer 1

Niet The Dark Absol在评论中回答：http://jsfiddle.net/GWGFy/2/

button[type=submit]:hover::after {
    display:inline-block;
    content:'';
    width:12px;
    height:12px;
    vertical-align:middle;
    background-color: #145;
    border-radius: 50%;
}

Answer 2

因为它是一个Input对象，所以我们不能使用CSS：before和：after伪元素所以我能想到的最接近的东西是没有实际添加div，而是在悬停时使用jQuery添加它，然后在它们离开后删除它这样：

$('input[type=submit], div.circle').mouseenter(function() {
  $(this).before('<div class="circle">&nbsp;</div>');
});
$('input[type=submit], div.circle').mouseleave(function() {
  $('div.circle').remove(); 
});

CSS 以设置新div的样式

div.circle {
background-color: #FFFFFF;
border-radius: 16px;
height: 15px;
left: 50px;
position: absolute;
top: 10px;
width: 15px;
z-index: 99;
}

这是一个JSFiddle，我的例子是希望，这就是你所需要的。

在提交按钮中绘制一个圆圈

2 个答案: