一、实现效果图

二、html代码

注意：如果是div，必须加上 tabindex="1"，否则，focus失效

          <div class="menu_label" tabindex="1">标签1</div><div class="menu_label" tabindex="1">标签2</div><div class="menu_label" tabindex="1">标签3</div><div class="menu_label" tabindex="1">标签4</div><div class="menu_label" tabindex="1">标签5</div><div class="menu_label" tabindex="1">标签6</div>

三、css代码

active：鼠标经过后的样式

focus：鼠标点击后的样式

.menu_label {float: left;border: 1px rgb(67, 150, 202) solid;padding-left: 10px;padding-right: 10px;padding-bottom: 3px;padding-top: 1px;border-radius: 15px;font-size: 10px;margin-left: 15px;margin-top: 8px;color: rgb(67, 150, 202);/* font-weight: bold; */margin-bottom: 7px;}.menu_label:active {background-color: rgb(67, 150, 202);color: white;}.menu_label:focus {background-color: rgb(67, 150, 202);color: white;}

【Css】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）相关推荐

css div 悬挂缩进_CSS中的经典字体效果：悬挂缩进
css div 悬挂缩进 A hanging indent, or hanging paragraph, is a paragraph in which the opening line is lef ...
[css] 如何阻止:hover、:active等鼠标行为状态的触发？
[css] 如何阻止:hover.:active等鼠标行为状态的触发? css属性:pointer-events: none;应用避免重复提交---按钮点击后即增加该属性使其不链接不可跳转-- ...
Vue实现集成使用第三方Animate.css动画库详细教程（解决鼠标移入移出闪烁问题）
vue通过第三方集成Animate.css简单快速的实现动画,通过类名引用,可以轻松实现Animate的所有动画,Animate.css是一款强大的预设css3动画库,Animate.css内置了很多 ...
css动画实现鼠标经过，图片放大效果
浏览器实现效果: 自己在浏览器实现时当鼠标移上图片有放大效果代码实现: <!DOCTYPE html> <html lang="en"> <head ...
html css怎样让鼠标悬停延时,鼠标悬停效果csscss鼠标悬停效果怎么写
以上需要的文件及图片无标题文档 /* 公用 */ body{ margin:0; overflow:hidden;} img{ display:block;} span{ display:block ...
qt下设置按钮不接收键盘鼠标但能响应 clicked()信号
最近有个需求:在业务开始时,线程自动向每个按钮发送clicked()信号,按钮接收到该信号后,执行该信号,从而模拟人单击按钮,但整个过程按钮不能接收键盘鼠标事件,防止人干扰线程自动模拟按钮的执行.首先 ...
css 鼠标悬浮样式_【技术】CSS设置链接鼠标（失效）不能点样式
css关键代码: <style type="text/css">.add-link{color: #358753;}.link-notallowd{opacity: . ...
html鼠标手状态,css html 鼠标手型,鼠标形状,鼠标效果,样式
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 CSS鼠标手型效果 Example:CSS鼠标手型效果 CSS鼠标手型效果注:pointer也是小手鼠标,建 ...
css html 鼠标手型,鼠标形状,鼠标效果,样式
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand&quo ...

【Css】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）

一、实现效果图

二、html代码

三、css代码

【Css】div或按钮鼠标经过或鼠标点击后效果样式（图文+示例）相关推荐

最新文章

热门文章