：悬停在一个元素上来改变另一个？答案

【问题标题】：:hover on an element to change another?：悬停在一个元素上来改变另一个？
【发布时间】：2014-02-02 16:29:38
【问题描述】：

我有这个条形图，当我悬停在特定条形图上时，我想将“测试 div”更改为不同的背景颜色和内容本身。

我在尝试制作一个元素时遇到了一些麻烦：悬停更改另一个元素。

我知道关于这个主题有很多类似的问题，但似乎没有一个对我有用。

HTML：

<div class="the-container">
    <ul>
        <li><a class="html" href="#"></a></li>
        <li><a class="css" href="#"></a></li>
        <li><a class="photoshop" href="#"></a></li>
        <li><a class="illustrator" href="#"></a></li>
        <li><a class="javascript" href="#"></a></li>
    </ul>
    <div class="test"><p>Hello</p></div>
</div>

CSS：

.the-container { width:300px; height:250px; background-color:#EEE; }

.the-container ul { margin:0; padding:0; list-style:none; }

.the-container li { width:40px; height:250px; margin:0 10px; position:relative; float:left;}

.the-container li a { position:absolute; bottom:0; width:100%; height:0; background-color:#ccc; border-top-left-radius: 5px; border-top-right-radius: 5px;}

.the-container li a.html:hover { background-color:#111; }
.the-container li a.css:hover { background-color:#ef3ef3; }
.the-container li a.photoshop:hover { background-color:#be3be3; }
.the-container li a.illustrator:hover { background-color:#cd3cd3; }
.the-container li a.javascript:hover { background-color:#888; }

div.test{width:300px; height: 30px; background-color:#BBB; position: relative; clear:both; line-height:2; margin-top:-16px;}

div.test p {text-align: center;}

a.html:hover ~ div.test{background-color:yellow;}

Demo

有什么想法吗？非常感激！

【问题讨论】：

您在寻找纯 CSS 的解决方案吗？
兄弟选择器 (~) 只选择直接兄弟。您的<div> 不是<a> 标签的兄弟。我不认为有任何方法可以用纯 CSS 做你想做的事
是的，这看起来像一个 javascript 任务
@StephenThomas 是对的，CSS 无法做到这一点。
正如@StephenThomas 所说，你不能只使用 CSS，因为你需要为父 ul 退一步@

标签： html css hover html-lists

【解决方案1】：

很遗憾，您只能使用 CSS 选择兄弟姐妹和孩子。为了能够定位.test，您需要在ul 或容器div 上应用:hover。

CSS 中子选择器和兄弟选择器的详细解释可以找到here。

更新

虽然我不喜欢语义，但这里有一个 POC 示例，说明它如何使用 CSS 和更改标记结构。

<div class="the-container">
<ul>
    <li class="item-html"><a class="html" href="#"></a></li>
    <li><a class="css" href="#"></a></li>
    <li><a class="photoshop" href="#"></a></li>
    <li><a class="illustrator" href="#"></a></li>
    <li><a class="javascript" href="#"></a></li>
    <li><div class="test"><p>Hello</p></div></li>
</ul>
</div>

.item-html:hover ~ li div.test { background: yellow; }

Fiddle

【讨论】：

您可能需要澄清一下，因为他并没有试图选择任何父母
感谢您的快速回复。我明白了.. 无论如何只用 CSS 和另一个标记来做到这一点？

【解决方案2】：

你不能用纯CSS，因为你已经在使用jQuery，为什么不做类似的事情：

$(".the-container a").hover(
    function() {
       $('.test').css("background","orange");
       $('.test').html("<p>text changed</p>");
    }, function() {
       $('.test').css("background","#bbb");
       $('.test').html("<p>Hello</p>");
    }
);

您也可以将.css 替换为addClass 和removeClass。

JSFiddle Demo

【讨论】：

我会非常强烈地选择用addClass 和removeClass 替换它，这样JavaScript 不关心CSS 样式，只关心标记类。
请注意，请不要像现在这样使用此解决方案，否则您网站中的每个 Anchor 都会导致事件触发...

【解决方案3】：

您是否尝试过 jQUery 解决方案？

$( '.the-container ul li a' ).mouseover(function() {
   $('.test').css("background-color", $(this).css('background-color'));
});

$( '.the-container ul li a' ).mouseout(function() {
   $('.test').css("background-color", "#BBB");
});

或者，使用.addClass("colored_test") 和.removeClass("colored_test") 而不是.css(...)。

【讨论】：

【解决方案4】：

您可以将您的 CSS 同级选择器与一些 jquery 结合起来，然后就可以使用了

尝试使用 css 控制颜色（空白仅用于视觉辅助）

.html        ~ .test{background-color:#111;}
.css         ~ .test{background-color:#ef3ef3;}
.photoshop   ~ .test{background-color:#be3be3;}
.illustrator ~ .test{background-color:#cd3cd3;}
.javascript  ~ .test{background-color:#888;}

但使用 jquery 将类应用于ul 以及mouseenter/mouseout

var ul = $('.the-container ul');
ul.on('mouseenter mouseleave', 'a', function(){
    ul.toggleClass( this.className );
});

http://jsfiddle.net/gaby/hgLkT/5/的演示

【讨论】：

【解决方案5】：

使用 jQuery 的 hover() 和 css() 函数。

    $('li a').hover(function(){
        $('.test').css('background-color', $(this).css('background-color'));
    });

FIDDLE

【讨论】：

【解决方案6】：

您可以使用此代码更改颜色和文本：

JavaScript

$('.illustrator').mouseover(function(){
    $('.test').css({backgroundColor:'#cd3cd3'});
    $('.test p').html('Illustrator');
});
$('.illustrator').mouseout(function(){
    $('.test').css({backgroundColor:'#BBB'});
    $('.test p').html('');
});

Complete Fiddle

【讨论】：

不需要那么多代码重复，这可以通过在hover 函数中执行类似的操作来重构：$('.test').css("background",$(this).css("background-color"));
@NickR 谢谢，好多了。我会更新答案中的链接。

【解决方案7】：

对于纯 CSS* 解决方案，您需要稍微更新结构。

IE：

<div class="the-container">
    <ul>
        <li class="html"><a href="#"></a></li>
        <li class="css"><a href="#"></a></li>
        <li class="photoshop"><a href="#"></a></li>
        <li class="illustrator"><a href="#"></a></li>
        <li class="javascript"><a href="#"></a></li>
        <li class="test"><p>Hello</p></li>
    </ul>
</div>

这是一个更新的示例：http://jsfiddle.net/hgLkT/8/

*这不是真正的纯 CSS 解决方案，因为您已经在使用 JS 来设置条形高度的动画。

【讨论】：