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

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

Answer 1

不幸的是，您只能选择带有CSS的兄弟姐妹和孩子。为了能够定位.test，您需要在:hover或容器ul上应用div。

可以找到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

Answer 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

Answer 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(...)。

Answer 4

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

<强>的JavaScript

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

<强> Complete Fiddle

Answer 5

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

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

FIDDLE

Answer 6

你可以将你的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/

演示

Answer 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来设置条形高度的动画。

：将鼠标悬停在元素上以改变另一个元素？

HTML：

CSS：

7 个答案:

更新

Fiddle