如何将3个选择器与:hover标记组合在一起？
将3个选择器与:hover标记组合在一起可以通过CSS的选择器组合来实现。选择器组合使用逗号分隔多个选择器，表示同时选择满足这些选择器的元素。
例如，如果我们有三个选择器分别是.selector1、.selector2和.selector3，我们想要在鼠标悬停在这些元素上时应用样式，可以使用:hover标记来实现。具体的CSS代码如下：
.selector1:hover, .selector2:hover, .selector3:hover {
/ 在鼠标悬停时应用的样式 /
/ 可以在这里设置元素的背景色、字体颜色等等 /
}
上述代码中，我们使用逗号将三个选择器组合在一起，并在每个选择器后面添加:hover标记。这样，在鼠标悬停在任何一个选择器所对应的元素上时，都会应用指定的样式。
需要注意的是，选择器组合可以用于任何类型的选择器，包括标签选择器、类选择器、ID选择器等等。同时，:hover标记只能应用于可交互元素，如链接、按钮等。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
- 腾讯云移动开发：https://cloud.tencent.com/product/mobdev
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
相关·内容
4回答
之前买的服务器可以退款么？
费用中心、5折上云
之前买的服务器可以退款么？你这活动力度好大啊
标题：腾讯云云产品新购特惠，五折上云！
地址：https://cloud.tencent.com/act/first_purchase?utm_source=portal&utm_medium=banner&utm_campaign=firstpurchase&utm_term=0109
浏览器信息
Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
浏览 1598提问于2018-01-20
3回答
文本鼠标悬停时的图像边框
javascript、jquery、html、css
我有三个相邻的产品块。每一个都有一个图像和下面的名字。我想做的是，当你将鼠标悬停在文本上时，它会在图像的底部显示一个边框。我为图像悬停设置了一个样式，当我将鼠标悬停在图像上时，它会起作用，但当我将鼠标悬停在文本上时，它就不起作用了。
。
还有我拥有的HTML：
<div class="container-product-row">
<ul class="variations">
<li>
<a href="#"><img src="../
浏览 2提问于2012-12-19得票数 1
回答已采纳
5回答
更改单选按钮上的输入文本选择不同的表单
javascript、jquery、html、forms
当按单选按钮时，我正试图使输入的文字改变。
表单本身有5个选项，有多个单选按钮和输入文本
我试图更改的输入文本是不同的形式，因为在更改主表单中的输入文本时，也应该在另一个格式上更改输入文本。
我现在就明白了
$(document).ready(function () {
$("input[type=radio]").click(function () {
$(this).closest('form').find("input[type=text]").val(this.value);
});
});
但是，这会更改当前表单中的输入文本。
浏览 3提问于2017-05-25得票数 1
回答已采纳
2回答
应用tr:悬停但只适用于某个类
css、material-table
我有一些CSS，颜色在我的桌子上的一行悬停。
tr:hover {
background: gray !important;
}
但是，它还突出显示了表中的筛选器行。所以我检查了一下，发现里面有<tr class="MuiTableRow-root MuiTableRow-hover"...etc
因此，我的问题是，如何修改上述代码，使其只适用于上述类？
编辑:第一次尝试应用类。
.MuiTableRow-root MuiTableRow-hover {
tr:hover {
background: gray !important;
}
}
浏览 4提问于2021-09-23得票数 1
回答已采纳
3回答
这个css代码是什么意思？
html、css、codeblocks
我偶然发现了一个特定的代码，却没有得到它。
1>
#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul{}
2>
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
浏览 0提问于2011-02-02得票数 0
回答已采纳
4回答
在样式中添加not选择器会破坏样式
css、css-selectors
我试图将某种hover样式应用于所有元素，但第一个元素除外。由于一些奇怪的原因，:first-child可以工作，但是添加:not(first-child)不能。为什么？全JSFiddle .
编辑：
显然，一小部分代码打破了这种风格，有些东西，我没有添加到原来的小提琴，因为我不认为它会重要，现在我意识到它。请注意，当其他标记位于a标记之间时，样式不起作用，如下所示：
<div id="mySidenav" class="sidenav">
<div id="logoContainer">
<a href
浏览 5提问于2017-01-11得票数 0
回答已采纳
11回答
多选择器上的木偶机waitForSelector
javascript、puppeteer、screen-scraping
我有一个木偶控制一个网站与查找形式，可以返回一个结果或一个“没有记录发现”的消息。我怎么知道是哪个退回来的？waitForSelector似乎一次只等待一个，而waitForNavigation似乎无法工作，因为它是使用Ajax返回的。我正在使用一个尝试接球，但它是棘手的，以正确和减缓一切的方式。
try {
await page.waitForSelector(SELECTOR1,{timeout:1000});
}
catch(err) {
await page.waitForSelector(SELECTOR2);
}
浏览 0提问于2018-04-20得票数 22
回答已采纳
2回答
FF中的按钮元素不对子元素应用悬停背景色。
html、css、button、hover
我需要使用语义标记的SEO代码友好的产品使用按钮元素，和模式属性。因此，我使用了"span“元素来分离各个项目。我设置了我想要与背景效果悬停为显示:块的项目。
工作范围: Chrome，Safari on MAC。Windows上的Chrome和IE。在Mac或Windows的FF中不工作:在FF中，不应用背景颜色悬停效果。瓦特？
不能在按钮元素中使用"ul、ol、li、div“或任何其他不是”短语内容“的元素，请参见此处：。
不能使用图像。无法使用Javascript。
编辑：“按钮:悬停”和“按钮:悬停.class”样式工作良好。“按钮.class:hover”在FF中不
浏览 5提问于2014-08-05得票数 0
25回答
【开箱吧腾讯云】开发工具千千万，哪个最高效最好用？
腾讯云、产品、工具、开发、开发工具
开发工具千千万，哪个最高效最好用？
在关键时刻解决了你的卡点和痛点，欢迎你和我们一起分享你使用过的腾讯云宝藏工具！
点赞最高的前5名将获得猫王小王子花梨原木便携蓝牙音箱1个（截止时间：11月12日24:00）
另外在11月9日晚20:00-21:00
【开箱吧腾讯云】将迎来3位开发大神分享自身工具箱
快来腾讯云开发者视频号预约吧！更有超多双十一产品优惠等你！
图片
浏览 1757提问于2022-11-02
3回答
使用PHP数组分配随机CSS伪类
php、css、pseudo-class
其目标是:在用户鼠标悬停时，随机分配不同颜色的CSS背景给Wordpress生成的标签云。
我的方法(目前还没有成功)：
<?php
$colors = array( 0 => "#645676", "#427048", "#654335", "#ab2805", "#a59d57", "#302f2f", "#81510d" );
$tags = wp_tag_cloud('smallest=10
浏览 4提问于2010-11-09得票数 1
回答已采纳
3回答
HTML:如何在此处更快地进行滚动
javascript、html
我已经开发了一个关于产品及其细节的应用程序。在该应用程序中，在一个页面上，它仅在一个页面上加载了近10,000个产品详细信息。
我在这里附上了一个原始的截图：
作为第一步，页面加载一个没有产品细节的空结构。然后使用javascript BigPipe在结构中添加产品的详细信息。
产品详细信息结构：
<div class="product_disp"
onclick="return clickEffect(this,event);"
onmousemove="return show_img_trail('product_detail
浏览 1提问于2011-02-11得票数 2
回答已采纳
8回答
深度学习在腾讯云上有哪些应用？
深度学习
腾讯云有哪些相关产品呢？我想使用深度学习做一些事情，但是对我这种小白来说可能有点难，有没有相关的应用场景参考下，有教程的话最好！
浏览 1721提问于2018-09-07
9回答
在CSS中，多个类中的逗号和空格是什么意思？
css、css-selectors
这里有一个我不理解的例子：
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
在我看来，width: 460px适用于上面提到的所有类。但是为什么有些类用逗号(,)分隔，而有些只用空格分隔呢？
我假设width: 460px将只应用于那些以CSS文件中提到的方式组合类的元素。例如，它将应用于<div class='container_12 grid_6'>，但不会应用于<div class='container_12'>。这个假设是正确的吗？
浏览 4提问于2010-07-27得票数 118
回答已采纳
8回答
如何更快地插入/编辑/分组css规则？
css、css-selectors
我发现我在写css的时候浪费了很多时间来寻找合适的地方来制定新的规则。例如，如果我有这个样式表：
.a, .b, #c {
display:inline-block;
}
.d {
color: #fff;
}
我想添加.d {display:inline-block;)，我经常会想一想，是把这个添加到第一节还是第二节。意思：
.a, .b, #c, .d {
display:inline-block;
}
vs
.d {
color: #fff;
display:inline-block;
}
显然，随着CSS变得更加复杂，在这方面浪费了更多的时间。另一个时间使用者是定
浏览 4提问于2013-01-29得票数 9
回答已采纳
1回答
单击以通过CSS放大缩略图，无需Javascript注入
javascript、html、css
我正在尝试实现一个类似于你在页面上看到的效果--当鼠标悬停在任何一个缩略图上时，主图像会被放大，并变成悬停在上面的缩略图。
根据我在上读到的内容，这是通过CSS实现的，不需要注入任何Javascript。
我用来显示/格式化图像的HTML如下：
#DIV_2 {
color: rgb(51, 51, 51);
float: left;
height: 547px;
text-decoration: none solid rgb(51, 51, 51);
width: 705px;
column-rule-color: rgb(51, 51,
浏览 0提问于2018-06-27得票数 2
1回答
如何在不需要任何子元素的情况下生成工具提示
javascript、html、css、tooltip
我一直在尝试制作一个工具提示，它在悬停<a>标记时激活并从另一个地方显示一个<div>
示例：
<p>
blah blah <a class="tooltiphover">hover me</a> blah blah
</p>
<div class="tooltip">
<!-- tooltip info code goes here -->
</div>
但是我偶然发现的每一个教程和站点都坚持使用子元素，最大的问题是它会使代码看起来很糟糕，或者强迫我使
浏览 3提问于2022-08-16得票数 0
1回答
是否可以将焦点集中在父元素中，而不是由所有子元素应用，而只应用一个特定的元素？
html、css、css-selectors
问题是:focus- to应用于标记示例中的所有子元素：
<a class="open" href="#">open menu</a>
<div class="parent">
<a class="link1" href="#">link1</a>
<a class="link2" href="#">link2</a>
<div class="menu2&
浏览 0提问于2021-09-11得票数 0
回答已采纳
灰色男人办公互联网活动封面.png
1024程序员节要来啦！
在这个特别的节日
特别想感谢我们可爱可敬的开发者们
在人类世界的进步史上
科技始终扮演着强大的推动作用
而在数字时代
开发者手握科技变革的钥匙
拥有改变世界的力量！
代码改变世界，技术造就未来！
而你
就是这个了不起的开发者！
想必在1024这一天各位开发者的公司会为大家准备很多线下惊喜与福利吧~我们在线上也同样给大家准备了福利与惊喜！邀请广大开发者一起在线上云过节吖~
今天我们来谈谈“了不起的开发者”，小编知道社区里的各位大神都是个个“身怀绝技”、身上一定有很多了不起的点可以跟大家分享~
活动规则：
活动时间：2021年10月
浏览 2466提问于2021-10-19
3回答
CSS奇怪的颜色出现在链接中
html、css
我正在创建一些HTML页面，我希望指向当前页面的导航链接具有与其他链接不同的样式。然而，我目前的解决方案并没有产生预期的结果。
这是我的密码：
<ul>
<li class="current"><a href="main.html">HOME</a></li>
<li class="current"><a href="about.html">ABOUT</a></li>
</ul>
和CSS：
.
浏览 1提问于2020-02-07得票数 3
回答已采纳
3回答
选择器的各部分和部分正确的术语和单词
css、css-selectors、terminology
用逗号分隔的CSS选择器部分的正确术语是什么？
body.foo .login , body.bar .login { ... }
/* |
Part 1 | Part 2 */
在这些部分中，由组合子分隔的部分(空格、+、>等)的术语是什么？
body.foo .login , ... { ... }
/* |
Part 1 | Part 2 */
浏览 12提问于2012-03-24得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
