关键词：
【中文标题】仅使用 css 更改另一个 div 的样式【英文标题】：change another div's styling using only css 【发布时间】：2013-07-14 16:43:34 【问题描述】：我使用 css 在我的网站中创建了这个悬停地图： http://travel-fellow.com/destinations 当您悬停在大陆上时，它会改变颜色。 但是底部还有另一个列表，当我将鼠标悬停在另一个列表上时，我无法使其工作。 html:
<ul id="continents">
<li class="northamerica"><a href="">North America</a></li>
<li class="southamerica"><a href="">South America</a></li>
<li class="asia"><a href="">Asia</a></li>
<li class="australia"><a href="">Australia</a></li>
<li class="africa"><a href="">Africa</a></li>
<li class="europe"><a href="">Europe</a></li>
</ul>
<ul id="continentslist">
<li class="northamerica2"><a href="">North America</a></li>
<li class="southamerica2"><a href="">South America</a></li>
<li class="asia2"><a href="">Asia</a></li>
<li class="australia2"><a href="">Australia</a></li>
<li class="africa2"><a href="">Africa</a></li>
<li class="europe2"><a href="">Europe</a></li>
</ul>
和css：
ul#continents
background: url("continents-540.png") no-repeat scroll 0 0 transparent;
height: 268px;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 580px;
ul#continents li
position: absolute;
ul#continents li a
display: block;
height: 100%;
text-indent: -9000px;
ul#continents li.northamerica
height: 163px;
left: 0;
top: 2px;
width: 237px;
.southamerica
height: 124px;
left: 116px;
top: 164px;
width: 93px;
.africa
height: 97px;
left: 209px;
top: 132px;
width: 116px;
.europe
height: 113px;
left: 239px;
top: 19px;
width: 87px;
.asia
height: 182px;
left: 304px;
top: 12px;
width: 168px;
.australia
height: 95px;
left: 390px;
top: 152px;
width: 114px;
ul#continents li a:hover
background: url("continents-540.png") no-repeat scroll 0 0 transparent;
ul#continents li.northamerica a:hover
background-position: -221px -318px;
ul#continents li.southamerica a:hover
background-position: 10px -536px;
ul#continents li.africa a:hover
background-position: -243px -537px;
ul#continents li.europe a:hover
background-position: -401px -514px;
ul#continents li.asia a:hover
background-position: -34px -324px;
ul#continents li.australia a:hover
background-position: -92px -527px;
因为我使用的是 joomla，所以我试图避免使用 jquery。
【问题讨论】：
一点研究，this 出现了。 【参考方案1】：你可以使用纯 CSS 来做到这一点
演示http://jsfiddle.net/kevinPHPkevin/daFDn/1163/
img.tree:hover ~ ul .tree
background:#ccc;
img.lion:hover ~ ul .lion
background:#ccc;
在您的情况下，您会将国家悬停分配给正确的列表元素。我只是为了举例而使用了两张随机图片，但理论适用。 IE7+支持这些选择器
已编辑
如果您想支持所有浏览器，请提供 jQuery 备份支持，或仅 jQuery 的解决方案
演示http://jsfiddle.net/kevinPHPkevin/daFDn/1167/
$('.lion-img').hover(
function ()
$('.lion').addClass('active');
,
function ()
$('.lion').removeClass('active');
);
$('.tree-img').hover(
function ()
$('.tree').addClass('active');
,
function ()
$('.tree').removeClass('active');
);
【讨论】：
以前从未听说过 ~ 运算符。 它的工作方式与+ 相同，但当元素与您希望影响的元素不相邻时会起作用。
不错的解决方案。查找“~”，这里有一篇关于“~”和“+”的文章 - css-tricks.com/child-and-sibling-selectors
我不确定我做错了什么，但它仍然无法正常工作。不带〜也不带+。也许是因为我试图改变其他元素的背景位置？在 CSS 悬停事件中，我可以更改另一个 div 的样式吗？ [复制]
...可以更改id为“b”的div或类的背景颜色？【问题讨论】：使用flexbox，您可以悬停其他元素，即使它们（似乎）被放置在DOM中悬 查看详情
仅使用 css 更改多个元素的样式
】仅使用css更改多个元素的样式【英文标题】：Changemultipleelement\'sstylewithcssonly【发布时间】：2022-01-0423:59:15【问题描述】：我需要更改表格中多个元素的背景颜色，但我不能使用javascript。起初我已经实现了一个代码来查看我需... 查看详情
仅使用 CSS，将鼠标悬停在另一个元素上时显示 div
】仅使用CSS，将鼠标悬停在另一个元素上时显示div【英文标题】：UsingonlyCSS,showdivonhoveroveranotherelement【发布时间】：2011-07-0918:19:36【问题描述】：当有人将鼠标悬停在<a>元素上时，我想显示一个div，但我想在CSS而不是J... 查看详情
使用 CSS 影响 iframe 中的 div 样式
】使用CSS影响iframe中的div样式【英文标题】：UsingCSStoaffectdivstyleinsideiframe【发布时间】：2010-10-0916:25:48【问题描述】：是否可以仅使用CSS更改位于页面iframe内的div的样式？【问题讨论】：HowtoapplyCSStoiframe?的可能重复更多关于CORS... 查看详情
使用按钮更改 CSS 模型
】使用按钮更改CSS模型【英文标题】：ChangeCSSmodelwithbutton【发布时间】：2016-12-1016:09:30【问题描述】：在我的Cordova应用程序中，我想要2个按钮：小文本：用我的div加载一个特殊的类大文本：另一个用于为我的div加载另一个类这... 查看详情
仅使用 css 样式化选择下拉菜单 [重复]
】仅使用css样式化选择下拉菜单[重复]【英文标题】：Stylingselectdropdownwithcssonly[duplicate]【发布时间】：2013-08-0713:15:38【问题描述】：我在网上搜索了将近两个小时，甚至没有找到一个CSS样式选择下拉列表的示例。最重要的是，我... 查看详情
如何使用javascript更改内联另一个元素的样式？
】如何使用javascript更改内联另一个元素的样式？【英文标题】：Howtochangethestyleofanotherelementinlineusingjavascript?【发布时间】：2017-06-2814:50:21【问题描述】：我想使用javascript在html元素中更改另一个元素的样式。我已经使用下面的代... 查看详情
使用绝对定位（不重复）在悬停另一个 div 时更改 div 的外观
】使用绝对定位（不重复）在悬停另一个div时更改div的外观【英文标题】：Changeadiv\'sappearanceonhoverofanotherdivwithabsolutepositioning(not-repeat)【发布时间】：2019-12-1707:06:24【问题描述】：我在具有相对位置的主div顶部有几个绝对位置的d... 查看详情
如何仅使用 CSS 在具有淡入淡出效果的悬停时更改 DIV `background linear-gradient`？ [复制]
】如何仅使用CSS在具有淡入淡出效果的悬停时更改DIV`backgroundlinear-gradient`？[复制]【英文标题】：HowtochangeDIV`backgroundlinear-gradient`onhoverwithfadeeffectusingCSSonly?[duplicate]【发布时间】：2020-08-1410:30:42【问题描述】：首先，我说的是backg... 查看详情
仅使用 css 更改顺序和定位
】仅使用css更改顺序和定位【英文标题】：Changeorderandpositioningusingonlycss【发布时间】：2013-06-2622:08:42【问题描述】：如何使用媒体查询更改div中的元素顺序和位置？下图显示了所需的行为（当浏览器窗口小于1000px宽时使用左图... 查看详情
如何在地图函数中使用 JSX 中的变量更改内联 CSS 样式？
】如何在地图函数中使用JSX中的变量更改内联CSS样式？【英文标题】：HowdoIchangeinlineCSSstylesusingavariableinJSXinsideamapfunction?【发布时间】：2018-11-2210:01:29【问题描述】：好的，所以我有一个映射函数，它通过一个数组运行，并在DOM... 查看详情
如何在另一个样式组件中定位样式组件？
...onent?【发布时间】：2021-04-0810:02:24【问题描述】：我不想使用div:first-child或div:nth-of-type(2)我想说的是Row或ColSm3就像我们通常在普通CSS中所做的那样，是否可以在另一个样式组件中定位样式组件？还是有另一种方法而不是使用 查看详情
如何间隔更改样式组件的样式？
...杂，只是从谷歌拿了一个codepen并尝试实现它....除了Codepen使用经典CSS，我正在使用样式化组件。基本上，代码更改了div的类（其中包含样式），其中包含设置间隔的文本 查看详情
使用相同 CSS 的不同 div 标签 - 我该如何更改？
】使用相同CSS的不同div标签-我该如何更改？【英文标题】：DIfferentdivtagsusingsameCSS-howdoIchangethat?【发布时间】：2021-12-2906:55:10【问题描述】：我在设置页脚样式时遇到问题。页脚用HTML分成4列，所有列都使用相同的CSS样式我要做... 查看详情
如何使用 Angular 6 + Handsontable 根据另一个单元格值仅更改一个单元格值？
】如何使用Angular6+Handsontable根据另一个单元格值仅更改一个单元格值？【英文标题】：howcanichangeonlyonecellvaluebasedonanothercellvalue,usingAngular6+Handsontable?【发布时间】：2019-12-2511:24:00【问题描述】：当我使用afterChange钩子（Angular6+Hands... 查看详情
仅更改 css 类中 rgba 的“a”
】仅更改css类中rgba的“a”【英文标题】：Changingonlythe\'a\'ofrgbainacssclass【发布时间】：2014-12-1818:28:01【问题描述】：我有一个可以确认某些元素的应用。创建它们时，它们默认为未确认，然后再被确认。它们可以属于另一个A类... 查看详情
div元素的css样式规则，该元素属于嵌套在另一个元素类中的多个类(代码片段)
我正在尝试创建一个样式规则，以将BorderBox模型应用于属于以下类的div元素：容器，行，以列，单元格和元素开头的类，所有这些都应嵌套在属于单元格类的div元素内。到目前为止，这是我的代码：div.cell>div.containerdiv.rowdiv[cla... 查看详情
如何仅使用 CSS 创建淡入/淡出效果？
】如何仅使用CSS创建淡入/淡出效果？【英文标题】：HowcanIcreateafadein/fadeouteffectusingonlyCSS?【发布时间】：2014-01-0907:52:46【问题描述】：我想只使用CSS来实现淡入淡出效果。如果我移动或悬停在一个div元素上，我需要调用另一个DIV... 查看详情