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

Posted 2023-03-06

【中文标题】：悬停在一个元素上来改变另一个？

【英文标题】：: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.testwidth: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.testbackground-color:yellow;

Demo

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

【问题讨论】：

您在寻找纯 CSS 的解决方案吗？

兄弟选择器 (~) 只选择直接兄弟。您的<div> 不是<a> 标签的兄弟。我不认为有任何方法可以用纯 CSS 做你想做的事

是的，这看起来像一个 javascript 任务

@StephenThomas 是对的，CSS 无法做到这一点。

正如@StephenThomas 所说，你不能只使用 CSS，因为你需要为父 ul 退一步@

【参考方案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        ~ .testbackground-color:#111;
.css         ~ .testbackground-color:#ef3ef3;
.photoshop   ~ .testbackground-color:#be3be3;
.illustrator ~ .testbackground-color:#cd3cd3;
.javascript  ~ .testbackground-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 来设置条形高度的动画。