html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上

这里的问题是子元素不继承父元素的border-radius.有两种方法可以实现您想要的：您可以将子元素的border-radius设置为匹配或大于父元素的radius,或者将父元素的overflow属性设置为hidden.

这是一个快速的片段,说明了问题和两个解决方案：

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}

div{

background:#000;

border-radius:50%;

display:inline-block;

line-height:150px;

margin:10px;

text-align:center;

vertical-align:top;

width:150px;

}

background:rgba(255,0,0,.25);

}

div:nth-of-type(2)>p{

border-radius:50%;

}

div:nth-of-type(3){

overflow:hidden;

}

Square hit area

Round hit area 1

Round hit area 2

如果子元素是图像,那么您将需要使用图像映射来裁剪其命中区域的附加技巧(Credit：Border-radius and :hover state area issue),如下所示：

*{box-sizing:border-box;color:#fff;font-family:arial;margin:0;padding:0;}

div{

background:#000;

border-radius:50%;

display:inline-block;

margin:10px;

text-align:center;

vertical-align:top;

width:calc(33% - 20px);

max-width:600px;

}

img{

display:block;

cursor:pointer;

height:auto;

width:100%;

}

div:nth-of-type(2)>img{

border-radius:50%;

}

div:nth-of-type(3){

overflow:hidden;

}

html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上相关推荐

鼠标移动区域局部放大
这个程序类似于淘宝购物时,在商品图像上移动鼠标,会出现一个放大鼠标周围矩形区域内的局部图像的窗口.话不多说,直接贴代码. [c-sharp] view plaincopy #include <c ...
C ++ /MFC 限制鼠标作用区域
CRect oldRect; GetClipCursor(&oldRect); //获取鼠标原区域 CRect RectLimist; GetDlgItem(IDC_IMAGE)->Ge ...
html鼠标悬停事件 dw,dw制作鼠标放上去图片就显示鼠标离开图片就消失
今天小编就为大家介绍dw制作鼠标放上去图片就显示鼠标离开图片就消失的效果,操作方法很简单的,不会的朋友可以参考本文哦! 操作步骤: 1.新建"HTML文档",在"布局&q ...
python selenium鼠标点击_Python+Selenium学习--鼠标事件
场景前景讲解了鼠标的click()事件,而我们在实际的web产品测试中,有关鼠标的操作,不仅仅只有单击,有时候还包括右击,双击,拖动等操作,这些操作包含在ActionChains类中. Action ...
html鼠标响应事件吗,学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动 ...
linux keynav 鼠标可以扔掉了键盘控制鼠标
我是一个vim用户,喜欢使用键盘操作大部分的事情.无奈现在很多软件从设计之初就是为了鼠标设计的.就导致有些时候不得不使用鼠标.那么退一步讲,能否使用键盘临时控制一下鼠标呢?这样就可以进一步减少鼠标的使 ...
html中如何设置动画鼠标,使用animate动画库添加鼠标经过动画
使用animate动画库添加鼠标经过动画蓝叶网站设计 2016-11-27 11679 4评论 animate是一个css3动画库,使用它简单几步就能很轻松的为网站增加各种 ...
vue实现PS效果，鼠标拖拽指令、十字辅助线、鼠标选点、打印页面指定内容、生成随机id、颜色选择器、div上输入文字（类似QQ截图输入文字）、vue图片上传转base64...
因为涵盖的小细节比较多,所以代码比较长,建议大家复制运行来进行对应功能查看,我在代码中添加了大量的注释,以供大家阅读代码最终效果部分细节 1.鼠标选点时可能会超出底图位置 2.图片的backgro ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...

html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上

html鼠标悬停区域拉伸,html – ：将鼠标悬停在具有边框半径的div上相关推荐

最新文章

热门文章