如何创建谷歌加圆圈与鼠标悬停效果

How to create google plus circle with mouseover effect?

本文关键字：鼠标 悬停 何创建 创建 谷歌      更新时间：2023-09-26

看过google +的人可能知道我在说什么…

基本上我的问题是这样的。我想有一个半径的圆，例如一些像素的文本在中心。当鼠标悬停时，圆的轮廓会扩大5倍。当我将鼠标移出时，圆圈会逐渐缩小到原来的大小。如果点击圆圈中间的文字，就会弹出一个类似警告框的东西。

做这件事的好方法是什么?怎么做?它是否包含div标签?

使用CSS3 border-radius来创建你的圆圈，并使用一些JS来做动画…或者你也可以尝试使用CSS3。

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

下面是他们使用的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>
相关文章：