Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用CSS更改悬停时的文本颜色

使用CSS更改悬停时的文本颜色
EN

Stack Overflow用户
提问于 2014-06-21 13:53:47
回答 3查看 96K关注 0票数 5

我已经搜索了,但找不到任何与我遇到的这个问题相关的东西。

我已经试着解决这个问题很久了,但似乎做不到。我有一个包含文本和图像的div。我希望当我在div中的任意位置悬停时,div中的所有文本和背景都会改变颜色。我已经使底部的文本随背景颜色一起改变,但似乎不能使顶部的文本(h4)改变颜色。

当我直接将鼠标悬停在h4元素上时,它会改变颜色,但当我将鼠标悬停在div中的任何位置时,它不会改变颜色。

下面的链接是我想要实现的一个粗略的例子。在h4标签的CSS上有单独的样式,所以不能像其他标签一样让它变成p。这将是最简单的方法,但不幸的是,它们必须保持不同。

这是我的CSS样式

代码语言:javascript
运行
AI代码解释
复制
.container {
    text-align: center;
}

.container h4 {
    text-align: center;
    color: black;
}

#project1 {
    text-align: center;
    color: white;
    background-color: white;
    background-color: rgba(255,255,255,0.9);
    color: black;
}

#project1:hover {
    background-color: blue;
    color: white;
}

#project1 h4:hover {
    color: white;
}

#project1 h4 {
    text-transform: uppercase;
}

a {
    text-decoration: none;
}

有没有办法使用CSS而不是jquery/javascript来做到这一点?我是网络开发的新手,所以目前只知道一些HTML/CSS。

谢谢。

汤姆

JSFIDDLE LINK

EN

回答 3

Stack Overflow用户

发布于 2014-06-21 13:58:56

将CSS样式从

代码语言:javascript
运行
AI代码解释
复制
#project1 h4:hover {
    color: white;
}

代码语言:javascript
运行
AI代码解释
复制
#project1:hover h4 {
    color: white;
}

JSFIDDLE DEMO

票数 10
EN

Stack Overflow用户

发布于 2014-06-21 13:58:07

您可以使用

代码语言:javascript
运行
AI代码解释
复制
#project1 h4 {
    color: inherit;
}

以使其继承#project1的颜色。

票数 2
EN

Stack Overflow用户

发布于 2017-10-13 09:29:00

你可以在p标签中嵌套h4标签。在CSS中不需要#project1 h4:hover

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/24342262

复制
相关文章
CSS样式更改——文本Content
上篇文章主要讲述了CSS样式更改中的背景Background,这篇文章我们来谈谈文本Content内容的基础用法。
前端皮皮
2020/11/26
1.7K0
CSS 鼠标悬停图片,显示隐藏文本
我在 JavaScript 鼠标悬停图片,显示隐藏文本 这篇博文当中实现了同样的效果,只不过是通过 JS 来实现的,但其实,通过 CSS 动画也能实现同样的效果,直接看代码吧
Nian糕
2018/08/21
8.6K1
CSS 鼠标悬停图片,显示隐藏文本
css美化文字选中时的颜色
很多网站的选中文字特效都是使用的默认色,看就了就有点腻,今天教你如何个性的美化选中文字 <p class="text">默认文字(选中底色为栗色,字体颜色为白色)</p> <style> /*栗色选
Youngxj
2018/06/06
2.2K0
SecureCRT更改vim中#注释的文本内容颜色
今天在学习redis的时候,发现vim打开redis.conf配置文件的时候,#注释起来的代码是蓝色的,阅读起来很不方便。
上分如喝水
2021/08/16
6.3K0
SecureCRT更改vim中#注释的文本内容颜色
bootstrap 表格 悬停 鼠标靠近变换颜色
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
用户5760343
2022/01/10
9910
bootstrap 表格 悬停 鼠标靠近变换颜色
BootStrap表格鼠标悬停颜色修改
在实际项目中BootStrap的默认样式可能并不能完全满足我们的需求,在开发过程中本着软件可维护性的需要,我们尽量不对其css文件进行修改,而是自定义添加公共css样式文件。
kirin
2021/02/02
2.4K0
纯CSS实现的一个对角线填充颜色的按钮悬停动效
itclanCoder
2023/09/14
2200
纯CSS实现的一个对角线填充颜色的按钮悬停动效
CSS 3.0实现的悬停菜单特效
今天给大家分享一个用CSS 3.0实现的悬停菜单特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <
越陌度阡
2020/11/26
1.2K0
CSS 3.0实现的悬停菜单特效
如何更改 Ubuntu 的终端的颜色
但是,如果你想要一个独一无二的的终端体验或者符合你自身品位的一些东西,你也可以改变你的 Ubuntu 的终端的颜色。
用户1880875
2021/11/08
14.7K0
CSS 3.0实现文字悬停特效
给大家分享一个用CSS 3.0实现的网页特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
1.8K0
CSS 3.0实现文字悬停特效
css实现鼠标悬停图片放大
解析: transform:scale()可以实现按比例放大或者缩小功能。 transition允许CSS的属性值在一定的时间区间内平滑过渡。 可以调节放大倍数以及放大过程所用时间。 效果:
马修
2021/01/21
5.7K0
css实现鼠标悬停图片放大
纯css实现图片悬停时显示渐变圆形信息浮层效果
实现这个主要是使用css布局中的相对定位与绝对定位,以及结合元素样式的opacity透明度实现
itclanCoder
2023/09/14
2120
纯css实现图片悬停时显示渐变圆形信息浮层效果
纯CSS3实现2个的鼠标悬停文本下划线动画效果
itclanCoder
2023/09/14
1700
纯CSS3实现2个的鼠标悬停文本下划线动画效果
纯CSS3实现悬停时出现对角线耀光效果的按钮
实现这个效果,主要是结合css3中的transform,以及动画关键帧@keyframes实现
itclanCoder
2023/09/14
1910
纯CSS3实现悬停时出现对角线耀光效果的按钮
CSS实现图片悬停文字叠加效果
在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。
@零一
2021/05/19
3.5K0
CSS 3.0实现卡片悬停立体特效
今天给大家分享一个用CSS 3.0实现的卡片悬停立体特效,效果如下: 以下是代码实现,欢迎大家制复粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
1.6K0
CSS 3.0实现卡片悬停立体特效
CSS 3.0实现视频字幕悬停特效
给大家分享一个用CSS 3.0实现的视频字幕悬停特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head>
越陌度阡
2020/11/26
4280
CSS 3.0实现视频字幕悬停特效
【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )
在网页布局中 , 一般不会允许这种情况发生 , 任意拖拽文本域会影响网页的整体布局 ;
韩曙亮
2023/04/24
7870
【CSS】更改用户界面样式 ③ ( 取消文本域拖拽 | 代码示例 )
CSS颜色选择
亮蓝色:#409EFF success: #67C23A warning: #E6A23C danger: #F56C6C info: #909399
渔父歌
2019/03/29
1.4K0
【CSS】:颜色、背景
CSS 数据类型 <color> 表示一种标准RGB色彩空间(sRGB color space)的颜色。一种颜色可以用以下任意的方式来描述:
WEBJ2EE
2020/03/02
2.8K0

相似问题

悬停时的CSS会更改背景颜色和文本颜色

10

CSS悬停不会更改文本的颜色

20

悬停时更改文本颜色

318

CSS形状和文本悬停更改颜色

57

顺风css悬停不更改文本颜色

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文