檬味博客 » 问答 » 如何用html和css做这个鼠标悬停背景和字同时变色，不用id，急急急！

如何用html和css做这个鼠标悬停背景和字同时变色，不用id，急急急！

利用 :hover 伪类即可。示例： .menu { display: block; } .menu .item { display: inline-block; margin: 6px; padding: 6px 9px; border: 1px solid #ccc; border-radius: 3px; line-height: 1.5em; } .menu .item:hover { background-color...
如何用html和css做这个鼠标悬停背景和字同时变色，不用id，急急急！
利用 :hover 伪类即可。

示例：
<style> .menu { display: block; } .menu .item { display: inline-block; margin: 6px; padding: 6px 9px; border: 1px solid #ccc; border-radius: 3px; line-height: 1.5em; } .menu .item:hover { background-color: blue; border: 1px solid blue; color: #fff; }</style><div class="menu"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div></div>2016-10-06
用a标签+hover, 例如html如下
<div class="page-container"> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> </div>样式:
.page-container a{ display: inline-block; width:40px; height:40px; line-height:40px; text-align:center; margin-right:5px; font-size:14px; background-color: #cccccc; border-radius:3px; color:#333333; text-decoration: none;}.page-container a:hover{ background-color:#18adda; color:#ffffff;}2016-10-06
<style>
a {
float:left;
width:30px;
height:30px;
line-height:30px;
text-align:center;
margin:2px;
color:#888;
background-color:#fff;
border:1px solid #88f;
border-radius:3px;
text-decoration:none
}
a:hover {
color:#fff;
background-color:#88f
}
</style>
<a href="#网址自己搞定">1</a>
<a href="#网址自己搞定">2</a>
<a href="#网址自己搞定">3</a>
<a href="#网址自己搞定">4</a>
<a href="#网址自己搞定">5</a>
<a href="#网址自己搞定">6</a>
<a href="#网址自己搞定">7</a>2016-10-06
mengvlog 阅读 24 次 更新于 2025-08-08 01:25:48 我来答关注问题0
3 个回答檬味博客专题活动
  • 然后去远足 如何用html和css做这个鼠标悬停背景和字同时变色,不用id,急急急!

    利用 :hover 伪类即可。示例： .menu { display: block; } .menu .item { display: inline-block; margin: 6px; padding: 6px 9px; border: 1px solid #ccc; border-radius: 3px; line-height: 1.5em; } .menu .item:hover { backgroun...

  • 文暄生活科普 如何设置html鼠标

    在HTML里设置鼠标样式，可以通过以下途径达成：一、CSS样式设置鼠标 常见鼠标样式：使用CSS的cursor属性可以设置常见的鼠标样式，如：default：默认指针。pointer：手型指针，常用于链接。text：文本选择指针，常用于输入框。move：移动指针。not-allowed：禁止指针。示例代码：button { cursor: pointer; }自定...

  • 文暄生活科普 只用 css 再加亿点点 html 就能实现一个 tooltip

    首先，我们需在 HTML 中加入 data-* 属性，并设置 tooltip 的 HTML 代码。在 span 标签加上data-tooltip 的属性，将其当作 HTML 属性直接使用，data-tooltip 的值即为要显示的提示文字。数据属性名称可以任意设置，但需以 data- 开头。接着，利用 CSS 的伪元素和 attr 来获取并显示数据属性值。通...

  • 刀剑上的舞者 css如何设置鼠标指针的样式?

    1、打开前端开发软件，新建一个html代码页面 2、在新建的html代码页面上找到,在这个标签里创建一个标签，a案例中使用的是。代码： 大家好，鼠标放到我身上就可看到效果 3、为新家添加鼠标指针为手指样式。在html代码页面中找到,在这个后面创...

  • mxjaishenghuo html css hover 如何实现鼠标经过锚文本(不可点击字体)出现下划线?

    跟定义链接连样式一样，通过a:hover来实现就可以，这个表示当鼠标移动到这个元素上时显示的样式：a {color:#FF0;}a:hover {color:#F00;}锚点代码：锚点1 上面的方式是不区分锚点的超链接的，如果要区分，可能为锚点增加一个特定样式，对应的CSS和锚点写法如下：CSS：.anchor...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部