Question

那些看过google plus的人可能知道我在做什么...

基本上我的问题是这个。我希望有一个半径为圆形的圆圈，例如中心有文本的一些像素。在鼠标悬停时，圆圈的轮廓会随着它加上5而扩展。当我鼠标移出时，圆圈逐渐缩小回原始大小。如果单击圆圈中间的文本，则会弹出某种警告框。

这样做的好方法是什么？它是否涉及div标签？

Answer 1

使用CSS3 border-radius创建你的圆圈和一些JS来制作动画......或者你可以尝试用CSS3来创建它们。

http://jsfiddle.net/DOSBeats/cE6Yb/

此版本使用JS。

Answer 2

以下是他们使用的CSS代码：

.eswd {
background: url("/images/experiments/nav_logo78.png") repeat scroll 0 -243px transparent;
}

.esw {
background-repeat: no-repeat;
border: 0 none;
cursor: pointer;
display: inline;
height: 15px;
margin-left: 5px;
overflow: hidden;
vertical-align: 6px;
width: 24px;
}

HTML：

<button g:pingback="/gen_204?atyp=i&amp;ct=plusone&amp;cad=S0" title="Recommend this page" g:undo="poS0" g:type="plusone" g:entity="http://anewyorkthing.com/" onmouseover="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.hvr(this,google.time())" onclick="window.gbar&amp;&amp;gbar.pw&amp;&amp;gbar.pw.clk(this)" class="esw eswd" style="" id="gbpwm_0"></button>

如何使用鼠标悬停效果创建谷歌加圈？

2 个答案: