Question

我正在尝试创建一个显示图标的菜单，当我将鼠标悬停在图标上时，文本将会出现。到目前为止我已经有了，但我想改变文本的背景颜色。

<div id='menu'>
    <div id='menuitems'>
        <div class="item" onclick="loadPage('/')">
            <span class="menuIcon"><img src='/img/layout/icons/home.png'/></span>
        </div>
        <div class="item" onclick="loadPage('/pages/settings/')">
            <span class="menuIcon"><img src='/img/layout/icons/settings.png' /></span>
        </div>
        <div class="item" onclick="loadPage('/pages/php/')">
            <span class='TextMenuItem'>< &#47; ></span>
        </div>
    </div>
    <div id="menuText">
        <div class="itemtext" onclick="loadPage('/pages/home/')">Home</div>
        <div class="itemtext" onclick="loadPage('/pages/settings/')">Settings</div>
        <div class="itemtext" onclick="loadPage('/pages/php/')">Projects</div>
    </div>
</div>

因此，如果我使用类item移动div，我想更改div的颜色，并使用类itemtext更改div。在css中，是否有可能在我悬停的一个类之前看到一个类被使用了多少次，并且基于该数字可以使用相同的数字为itemtext div的背景着色，或者我有使用javascript？

JSFiddle with progress：http://jsfiddle.net/WszKV/

Answer 1

我认为

.item:hover .itemtext:hover{
  color: <new color>;
  background-color: <new color>;//if that is what you were looking for
}

应该有用。

Answer 2

使用javascript结束解决我的问题。

$('.item').hover(
    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
    }
)
$('.itemtext').hover(
    function() {
        var index = $(this).index();
        changeMenuBg(index, true);
    }, function() {
        var index = $(this).index();
        changeMenuBg(index, false);
    }
)
function changeMenuBg(index, hover){
    if(hover){
        $($('.item').get(index)).css('background-color','#FF2400');
        $($('.itemtext').get(index)).css('background-color','#FF2400');
    }
    else{
        $($('.item').get(index)).css('background-color','');
        $($('.itemtext').get(index)).css('background-color','');
    }
}

css如何在另一个div中选择一个类

2 个答案: