仅使用 css 更改另一个 div 的样式

Posted 2023-05-08

【中文标题】仅使用 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

我不确定我做错了什么，但它仍然无法正常工作。不带〜也不带+。也许是因为我试图改变其他元素的背景位置？