css悬停可更改具有相同类的多个不相关元素
CSS悬停可更改具有相同类的多个不相关元素是指在网页开发中，通过CSS样式来实现当鼠标悬停在具有相同类的多个不相关元素上时，改变这些元素的样式。
悬停效果可以为网页增加交互性和视觉效果，提升用户体验。通过CSS选择器和伪类，可以轻松地实现这一效果。
以下是实现悬停效果的步骤：
- 为需要应用悬停效果的元素添加相同的类名，例如class="hoverable"。
- 使用CSS选择器选中具有相同类名的元素，例如使用类选择器".hoverable"。
- 使用:hover伪类来定义鼠标悬停时的样式。例如，可以设置背景颜色、字体颜色、边框等属性。
示例代码如下：
.hoverable:hover {
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
}在上述示例中，当鼠标悬停在具有class="hoverable"的元素上时，背景颜色将变为#f0f0f0，字体颜色将变为#333，边框将变为1px实线边框。
这种悬停效果可以应用于各种元素，如按钮、链接、图像等，以增强用户与网页的交互。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我需要为jquery选项卡应用自定义CSS ...我在单个View...How上有两个Jquery选项卡面板，以便为两个选项卡面板应用不同的CSS。
选定、悬停和默认的Css
请给我提个建议
谢谢Narasimha
浏览 2提问于2012-01-13得票数 0
3回答
获取具有相同类的特定图像
、、、
我目前正在实现一个系统，在这个系统中，我需要在特定图像的悬停上创建一个图像层。从jquery中，如何获得和设置特定映像的可见性，即使它们具有相同的类。
这是我的js代码
$(document).ready(function() {
$('.imgclass').mouseover(function() {
$('.hoverimg').css('visibility','visible');
$('.hoverimg').css('opacity','
浏览 4提问于2013-07-27得票数 1
回答已采纳
1回答
我刚接触mootools，如何像在jQuery Element.css('background')中一样获取元素的css属性
苏尔坦
浏览 0提问于2011-03-25得票数 1
回答已采纳
1回答
我正在开发一个应用程序，它使用slimScroll jQuery插件()向div容器添加一个很好的溢出。
除了一个小的、几乎微不足道的烦恼之外，一切都可以工作:当第一次加载页面时，插件将在div上启动，并自动显示滚动条。悬停在容器外后，滚动条将被隐藏。
是否有任何方法使滚动条在页面加载时以隐藏状态启动？
开发者被问了很多次，但我在网站上找不到解决方案。
任何帮助都将不胜感激。
浏览 5提问于2015-06-11得票数 1
回答已采纳
我有一个带有悬停伪类的CSS类：
.nav-collapse a:hover {
background: #DEDEDE;
border-radius: 3px;
}
我想用jQuery动态更改背景色，即访问CSS-类(..nav折叠a:悬浮)并更改背景色。我尝试了以下几种方法，但不起作用：
$(".nav-collapse a:hover").css({
"background": "#000",
"color": "#fff",
});
访问CSS类的悬停类的正确方法是什么？
浏览 5提问于2015-03-24得票数 2
回答已采纳
2回答
我尝试仅在两个不同的类附加到div时才应用CSS :hover选择器。我已经尝试过了，但这消除了悬停效果。
.accordionButton .cyan:hover{
color: cyan;
}
我也不能这样做：
.accordionButton:hover, .cyan:hover{
color: cyan;
}
因为我还有另外两种颜色，我也在尝试这样做。
基本上，有没有办法让CSS仅在同时是.accordionButton和.cyan的div上悬停时应用？
浏览 5提问于2013-02-08得票数 6
回答已采纳
1回答
键盘TAB选项不可见
、、、、
我有一个角度应用程序，当我使用键盘TAB在元素周围移动时，当前的聚焦元素没有突出显示。
这就是当我对元素进行TAB时的样子。
这时，我单击空间展开accordionTab
然后我添加了下面的CSS，但它只适用于鼠标悬停，而不适用于选项卡选择。
::ng-deep {
.ui-accordion-header:hover, .ui-accordion-header:active, .ui-accordion-header:focus {
border: solid #00a1cf 1px !important;
}
}
我一直在测试，当我
浏览 0提问于2018-11-09得票数 1
1回答
我使用angularjs指令创建了一个下拉菜单，该指令运行良好，现在我在指令中编写了所有css，在其中一个特性中，当鼠标悬停下拉列表选项时，它应该将背景颜色更改为#27A1EC -蓝色，文本颜色改为白色，在鼠标离开时，背景颜色为白色，文本颜色为实际颜色，但我面临的一个问题是，由于在JQLite中没有JQuery .find()选项，我尝试使用了如下所示。
我用的是angular.element(document.querySelector('#parent'))而不是elm.find('a').first()，我不知道这是否正确
elm.find("a
浏览 0提问于2015-04-07得票数 1
回答已采纳
1回答
我对Dash并不陌生，但对python、html和css并不陌生。
我有一个相对基本的结构，它呈现一个，如下所示：
def render_datatable(df=None, id=None):
dt1= dash_table.DataTable(
id=id,
columns=[{"name": i, "id": i} for i in df.columns],
data=df.to_dict('records'),
style_data={'height'
浏览 4提问于2022-01-25得票数 1
回答已采纳
3回答
当我将光标悬停在链接上时，如何更改div文本字体颜色？那么使用css是不可能的吗？我的尝试：
<style type="text/css">
a:hover .text {
color:#FF00FF;
}
</style>
</head>
<body>
<a href = "">link</a>
<div class = "text">TEXT TEXT</div>
<
浏览 2提问于2010-09-24得票数 1
回答已采纳
4回答
最近几天我在做一个项目，现在在这个项目中，我有一个边栏，上面有这样的按钮
<div class="btn">
Button 1
</div>
<div class="btn">
Button 2
</div>
<div class="btn">
Button 3
</div>
另外，我有一些关于mouseenter事件代码的javascript，如下所示
$(function).ready(function(){
$('.btn').
浏览 3提问于2017-08-27得票数 1
回答已采纳
5回答
如何从css文件禁用悬停效果，并获得第二个` `css文件的悬停属性来处理html元素。
Html -
<p>
<a href="" title="">demo hover</a>
</p>
style.css
a:hover{
color:#000;
background: #ccc;
border:none;
/*Here can be more styling*/
}
style_new.css
a:hover{
color:green;
backgro
浏览 7提问于2015-08-20得票数 2
3回答
这有点难以解释，但我想要实现的是将一个class / css应用于一组具有相同类名的div。具体地说，它将是一个展示缩略图的画廊。它们都出现在一起，但按类名分组。当您将鼠标悬停在特定类的图像上时，具有相同类的所有图像将保持不透明，而其余图像将更改其不透明度。也许这可以通过改变覆盖div的显示来实现？
因此，从本质上讲，我需要一些方法来以相同的方式显示具有相同类的div，而不管它们在悬停时的类名。
如果有人能为我指明正确的方向，我将不胜感激！
例如(当悬停在类1上时，它们是不透明的，类2是透明的，反之亦然)：
<div class="thumbnail 1">
<
浏览 0提问于2011-10-23得票数 0
回答已采纳
1回答
<p class="pen" style="color:#000">abc</p>
.pen{
color:#333
}
在上面的html和css中，内联样式比类具有更大的优先级，因此将使用#000。但是当我做$('.pen').css('color')的时候，我得到了#333。我怎样才能得到当前样式的颜色？
浏览 1提问于2015-04-03得票数 0
回答已采纳
3回答
我想从网站上抓取数据。我使用下面的代码
import scrapy
class KamusSetSpider(scrapy.Spider):
name = "kamusset_spider"
start_urls = ['http://kbbi.web.id/abadi']
def parse(self, response):
SET_SELECTOR = '.tur highlight'
for brickset in response.css(SET_SELECTOR):
浏览 7提问于2017-07-06得票数 3
1回答
鼠标翻转使用一个图像作为悬停。这很酷，但我不知道如何让它在水平菜单中工作。我做什么好？
<head>
<style>
/*CSS HOVER WITH ONE IMAGE*/
#emailUs{display: block;width: 107px;height: 23px;background: url("slide.jpg") no-repeat 0 0;}
#emailUs:hover{background-position: 0 -23px;}
#emailUs span{position: absolute;top: -999em;}
<
浏览 8提问于2011-03-31得票数 0
回答已采纳
我是wordpress的新手。我正在进行wordpress的自定义主题设计。在css中，当我更改菜单css时，我通过此css来实现悬停样式。这里有人能告诉我这个#access li:hover > a,#access a:focus.How是什么意思吗?它控制着悬停的属性。我只是新手，所以在否决我的问题之前，任何帮助和建议都会对我更有帮助。
浏览 3提问于2012-11-29得票数 0
我正在使用CMS，所以我不能完全控制以哪种方式显示什么，所以我决定简单地克隆一个容器，使用下面的代码。克隆会按预期创建，但正如您在我的脚本(第一行)中看到的那样，我希望在它上面有一个悬停效果。在原始版本上，它的工作方式与预期一样，但是克隆的部分不会对悬停功能做出反应，这是为什么？我怎么才能绕过它呢？
<script>
$(document).ready(function(){
$("section.block-bookoblock").hover(function(){
$(".block-bookoblock ul.menu").cs
浏览 0提问于2013-07-18得票数 0
我有一个页面列出了图像。当我将鼠标悬停在该图像上时，它会在图像上显示播放图标。
为此，我编写了一些jQuery代码：
$('#hovervideo').mouseenter(function (){
var isviddiv = $(this).find('.video-thumb');
if(isviddiv.length){
isviddiv.css('display','block');
}
console.log(isviddiv.length);
});
$(
浏览 0提问于2011-09-28得票数 0
回答已采纳
我试图为一个有多个行跨度的表做一个悬停效果，但我没能让它完全工作。
在另一个堆栈溢出中描述的css不工作(请参阅此处的解决方案 )。
这里的示例(多列上的行跨度)：
悬停css效果定义为：
tbody:hover td[rowspan], tr:hover td {
background: red;
}
有什么建议吗？
浏览 0提问于2018-03-07得票数 0
例如，我可以通过以下两种方法获得相同的结果。
<html>
<head>
<style type="text/css">
p#red{color:red} /* This is a CSS id selector*/
p.green{color:green} /* This is a CSS class selector*/
</style>
</head>
<body>
<p id="red">red color</p>
<p cla
浏览 3提问于2014-03-21得票数 0
回答已采纳
2回答
CSS Sprites和图像映射
、、、、
我正在尝试将CSS Sprited类嵌入到图像映射中。最初，我创建了一个加载了8张图片的HTML图像映射：
带有7个按钮的正方形图像=未悬停时为灰色。7个正方形图像，每个都有一个按钮，用于悬停的颜色。
这导致了图像的加载问题，因为图像直到有人悬停时才会加载，导致用户看到的图像悬停时会有短暂的延迟。
我查看了CSS Sprites，发现这将是快速加载所有所需按钮的最有效方式。
所以...我已经创建了我的CSS sprite，但是图像映射似乎只允许我调用图像文件，而不是为Sprite创建的类。我如何融合这两种技术，让我将鼠标悬停在每个按钮上，并根据CSS Sprite的位置激活它们各自的颜色。
如
浏览 1提问于2011-07-12得票数 1
请看一下这段代码。我选择了具有相同I的所有元素，但是，只有第一个元素改变了颜色，当您将鼠标悬停在其他元素上时，它们的颜色保持不变。我不确定我的做法是否正确..请多多指教。
这里是-> 的生活演示
$(document).ready(function(){
$("#ade").live("hover", function(){
$("#ade").each(function (){
$(this).toggleClass('highlight');
浏览 1提问于2013-05-02得票数 1
回答已采纳
如果我克隆一个元素，那么如果我想定制该元素(通过id)，那么如何定制克隆的元素呢？
我试过的是：
<div id="A"> //the element that will be clone
</div>
<div id="box" style="margin-top: 50px"> //into this box
</div>
CSS
#A{
width: 100px;
height: 100px;
background: #000;
}
JS
$('#A').clo
浏览 4提问于2016-03-08得票数 0
回答已采纳
1回答
我制作了tumblr主题(虽然我不是一个专业人士，也不是一个学生，但我通过乱搞了解到了我所知道的东西)，我一直在努力解决关于post图像的“故障”。
基本上，当你在帖子上悬停时，图像会在几秒钟后“失去”几个px，这会影响完整的图像和最终的图像填充--这只会在webkit浏览器中发生。
下面是一个例子：
代码：
如果你向下滚动页面，你可以看到棉花糖的图片不受此影响。我想知道：
为什么整件事都发生了？
怎么修呢？
浏览 6提问于2014-07-03得票数 0
2回答
我使用将对圆角的支持添加到IE7/8中。我发现，当页面上有许多带有圆角的元素时，IE9中的性能在启用饼图时会显著下降:滚动变得滞后，简单的悬停效果(如链接颜色变化)明显延迟，等等。
但是根据PIE自己的文档，如果浏览器本机支持您正在使用的特定CSS3特性，PIE在CSS3中“什么也不做”。从理论上讲，如果我只使用边框半径( IE9支持的)，那么启用饼会对性能没有影响。
是什么导致了这一切？
浏览 1提问于2012-01-06得票数 3
回答已采纳
我的头中有两个来自类"menu_top“的链接，因此：
<a class="menu_top" href="adverteerders.html" >adverteerders</a>
<a class="menu_top" href="ondernemers.html" >ondernemers</a>
对应的css代码为：
.menu_top {
font-size: 14px;
}
.menu_top:link {color: #404040;}
.men
浏览 0提问于2013-03-16得票数 0
4回答
我有一个css按钮样式和一些预定义的颜色样式。我使用colour类将对象着色为相同的颜色，并使用按钮样式使按钮变圆。
如何将悬停样式添加到按钮以将颜色更改为较浅的阴影？我以为它会像.class一样简单:hover {etc}，但由于某些原因它不能工作。
这里有一个我准备演示的小提琴：
HTML
<p class="red button">Test</p>
<p class="blue button">Test</p>
<p class="red"> Not a button </p
浏览 0提问于2013-04-05得票数 8
回答已采纳
3回答
我的css：
.pic img:hover {
border: 1px black solid;
}
我的html：
<div class="pic">
<img src="hey.jpg">
<img class="overlay" src="overlay.jpg">
</div>
我有一个"overlay.jpg“，放置在第一个图像的底部角落。css的问题在于，覆盖也会产生:悬停效应。
实际的代码非常复杂，我知道最好的解决方案是在第一个映像中添加一个类并将其
浏览 5提问于2014-11-17得票数 1
回答已采纳
1回答
我想要在一个表格上应用名为“模糊”的滤镜(在css中只是悬停)，不包括在那个时刻悬停的td。否则，将从页面加载中应用滤镜模糊。那么，仅通过使用CSS，我如何从表的悬停中排除悬停的td呢？ table td {
filter: blur(1px);
}
td:hover {
filter:blur(0px)
}
浏览 12提问于2019-05-26得票数 2
我有一个超级菜单，我在其中插入了许多项目菜单的声音。其中一些菜单项有子菜单。我使用脚本打开子菜单声音的下拉列表。
这是HTML代码：
<div class="dropdownblock">
<h5><a itemprop="url" href="#"><span itemprop="name">Dove Dormire</span></a></h5>
<div class="trianglesubmenu"&g
浏览 4提问于2016-05-31得票数 0
回答已采纳
1回答
我有这个CSS代码
.dropdown-menu > li > a:hover {
background-color: #85E6FF;
background-image: none;
}
当窗口最大化时，它工作得很好，我的下拉菜单在悬停时会显示#85E6FF的颜色。但当我折叠时(例如在我的手机上)，无论是在悬停时还是在我点击时，颜色都不会发生变化。我该如何解决这个问题呢？
浏览 6提问于2018-01-16得票数 0
回答已采纳
2回答
在我的场景中，我有一个包含许多单元格的html表，其中一些单元格的类有hov1、hov2、.、hov42、.，直到hov920。
这是一个很小的表，暗绿色单元格(hov1)正在悬停，浅绿色(hov2)没有悬空(运行Javascript，运行非常好，除非表变大)。
...
<td class="hov0" style="background-color: rgba(0, 200, 0, 0.1);">AA</td>
<td">00</td>
<td class="hov2" sty
浏览 1提问于2020-07-13得票数 0
回答已采纳
Chrome (和Firefox)都有非常棒的工具来更改元素的当前状态，例如将其设置为悬停状态，以便您可以检查/修改css：
问题是，这似乎没有引发任何JavaScript事件。
我目前正在尝试样式的工具提示，它显示在悬停。当我将鼠标从该元素中移走时，很难手动地在元素上悬停，而将状态设置为在开发人员工具中悬停似乎不会引发jQuery事件。
我不得不在developer检查器中的元素上添加一个ID，然后在控制台中执行以下操作：
$("#custom-element-hover").mouseover();
这感觉不对(而且有点麻烦)。
有没有更好的方法来做我不知道的事？
浏览 7提问于2014-12-08得票数 1
回答已采纳
我在我的客户网站上做前端工作，遇到了一个奇怪的问题。在某些页面上(可能占网站总页面的5% )，简单的汉堡包图标javascript根本无法运行。
以下是JS (同样，它在95%的页面上工作)：
const userBox = document.querySelector(".wdgt-user-box");
const userBtn = document.querySelector(".wdgt-login");
function toggleUserBox() {
if (userBox.style.display === "block&#
浏览 3提问于2022-08-31得票数 -1
1回答
我正在使用jQuery来更改按钮的背景图像，这取决于悬停时与其关联的类。然而，只有当我将鼠标悬停语句放在单独的函数中时，它才能起作用。为什么会这样呢？
下面是不起作用的代码，总是计算为keyup hover语句，即使通过keyup事件删除了该类。
$(function() {
{
$('.submit-getinfo').hover(function ()
{
$(this).css( {backgroundPosition: "right bottom"} );
}, function() {
$(this).css( {ba
浏览 2提问于2010-05-09得票数 0
回答已采纳
我有这个html：
<input type="text" class="SePresu" name="Hola">
当我在jquery中按类类型和名称选择它时。
问候
浏览 3提问于2013-08-26得票数 0
回答已采纳
1回答
我有以下css选择器无法工作：
.button.button-green:hover
但是，如果我这样做，它可以正常工作：
.button-green:hover
这是CSS已知的问题吗?有什么方法可以解决这个问题(只使用一个类作为悬停)？
浏览 1提问于2012-11-09得票数 2
4回答
我正在尝试制作一个使用css和jquery的菜单，但我在尝试如何定位特定元素时遇到了几天的问题。
这是我的
CSS
.contain {
width:150px;
height:150px;
background-color:blue;
}
.contain:hover #arrow {
cursor:pointer;
display:block;
}
.show {
display:block;
background-color:green;
}
.hide {
display:none;
}
JS
$("#ar
浏览 0提问于2013-05-31得票数 2
回答已采纳
我正在写一个来自codrops的教程。每个项目都有一个悬停事件，以及一个触发anime.js函数的单击事件。
我正在尝试这样做，这样某些项目(网格单元格)在单击时不会触发anime.js函数，但悬停函数仍然有效。
我尝试过简单的css指针事件，但这会禁用悬停功能。
我在JS中将这两个组构建为单独的项目，但是动画的效果并不相同(它使两个不同的类交错)。
我尝试过停止默认的javascript行为，但似乎对代码没有影响。
救命！
我已经做了一个功能正常的代码-在那里的选项中，我试图禁用任何带有id="noClick“的网格项目的点击事件-但没有用。
$('noClick')
浏览 1提问于2019-11-15得票数 1
2回答
我有两个内联元素。您可能会认为它们是完全相同的，只是其中一个的位置被设置为绝对位置，并且它位于另一个的下方。如下所示：
<body style="text-align: center;">
<span style="background-color: #000; color: white; font-size: 300px; line-height: 1; padding: 0; position: relative;">
AAA <span style="background-color: #333; color:
浏览 1提问于2012-02-03得票数 1
1回答
我终于抽出时间为我的印刷设计组合创建了一个网站。我确切地知道我想要实现什么，但是作为网页设计的新手，我发现我所拥有的知识有一些局限性……
我已经使用了css3转换(目前它们只在Chrome和Safari中有效)来制作在悬停时触发的翻转卡片--它们工作得很好，也正是我想要的。我现在要做的就是添加一个JavaScript函数(使用jQuery)，它可以在点击时永久翻转卡片。我不希望它禁用悬停功能，这是纯粹的css。
我发现这很难实现。
网站在这里：
任何帮助都将不胜感激。
浏览 3提问于2011-11-03得票数 0
回答已采纳
我在li元素中有div：
<ul id="tabs">
<li id="tab-1"> <div id="xxx"></div> </li>
....
</ul>
如果在CSS中，我在li元素上应用悬停效果
#tabs li:hover {....}
正如预期的那样，该效果应用于li和child div，
但是，如果我在li和冒号之间留一个空格
#tabs li :hover {....}
效果仅适用于子div
这是正常的吗？我是一个脚本初学者，通过阅读
浏览 3提问于2012-01-07得票数 1
回答已采纳
3回答
当我将鼠标悬停在<p>标签上时，我只想更改一个父级。代码是：
$('.hover').each(function () {
$(this).parent().hover(function () {
$('p').parent(this).css('font-size','30px');
}, function () {
$('p').parent(this).css('font-size','10px'
浏览 1提问于2012-09-13得票数 5
基本上，我想知道什么是最好的，以避免未来的问题和混乱的CSS代码…
像这样命名CSS特性：
div#content
ul#navigation
div.float-left
(真的没必要这么做吗？)
或者只是
#content
#navigation
.float-left
我没有大型项目的经验，所以我希望有人能告诉我，在HTML和CSS变得更长的时候，哪种方法更好。
浏览 0提问于2009-06-29得票数 2
回答已采纳
1回答
我有一个html文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charse
浏览 1提问于2013-06-20得票数 0
回答已采纳
3回答
我在使用函数.hover ()时遇到了问题。这是一个简单的悬停效果，在一个div有一些内容，问题是，我有多个div与相同的类和这个功能动画所有的项目，而不仅仅是一个多的步骤，我如何修复它？谢谢，这是我的代码
html：
<div class="col-lg-4 col-md-4 col-sm-6 progetto hidden-xs">
<div class="box-progetto-image">
<?php the_post_thumbnail(); ?>
<h2 class
浏览 3提问于2014-11-09得票数 4
回答已采纳
3回答
有没有一种方法可以在一个表中对tr进行分组，这样当你将鼠标悬停在其中的五个上时，就会触发悬停函数？
我可以单独做这件事，但我希望5行作为一个组。所以在这5行中的任何地方悬停都是有效的。当你悬停的时候，它就消失了。
我目前正在对单独的行使用它。
$('#second_step tr').hover(function(){
$(this).css('background','#eff0ef');
},function(){
$(this).css('background','#fff');
});
浏览 1提问于2011-09-13得票数 2
回答已采纳
4回答
我想像这样更改一个元素的css属性：
0.5是a.archive_blocks_fa的标准不透明度。当a.archive_blocks_sa悬停时，a.archive_blocks_fa必须具有不透明度1.0。悬停事件结束时，a.archive_blocks_fa必须返回到不透明0.5。
HTML：
<div class="archive_blocks">
<a href="#" class="archive_blocks_fa">
<img width="142" height="1
浏览 3提问于2012-02-14得票数 0
回答已采纳
1回答
当我使用博客布局时，当我将鼠标悬停在任何内容上时，我看到一个带有代码#EEE的背景
当我更改为单篇文章布局时，将鼠标悬停在文章上不会显示背景
我正在试图找出是什么导致了博客布局上的悬停问题。我不想要一个悬停。
我检查了css模板，但找不到任何在悬停时设置背景图像或背景颜色的代码，该代码的颜色为#EEE
任何帮助我们都将不胜感激
浏览 1提问于2012-04-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
