3

私の問題はおそらく非常に単純ですが、どういうわけか修正できません。1 つのオブジェクトをホバーしたオブジェクトのグループで、ホバーしたオブジェクトを変更しないでおきたいのですが、他のすべてのオブジェクトは変更する必要があります。

より具体的には、メニュー項目の順序付けられていないリストがあります。それらの1つにカーソルを合わせると、他のすべてのアイテムが小さくなるはずです. アイテムを「ホバー」すると、元に戻るはずです。

この投稿を見つけましたが、その答えはうまくいきませんでした: Set style for not not hovered elements only

これは私がこれまでに試したことです：

/*This is the default size*/
#navigation ul li a
{
    font-size: 14px;    
}
/*When the list is hovered, change font-size (does’nt work)*/
#navigation ul:hover
{
    font-size: 13px;    
}
/*When the a menu-item is hovered change it’s font-size back to default*/
#navigation ul li a:hover
{
    font-size: 14px;    
}

これは、私が言及した投稿で見つけた答えの1つです。素のCSSで簡単にできたら最高です。しかし、それは機能していません。私は何か間違ったことをしましたか？

私は専門家ではありませんが、jQueryでも試してみました。

for(var i=1; i <= anzahlNavipunkte; i++)
{
    var naviId = "navi" + i; // id name for every menu-item
    var currentMenuItem = "#navigation li:nth-child(" + i + ") a"; 

    $(currentMenuItem).attr('id', naviId); // gives the current menu-item a specific id

    $('#navigation li a').hover(function()
    {   
        var hoveredId = $(this).attr("id"); // get the id of of the hovered element

        $('#' + hoveredId).hover(function()
        {   
            console.log(hoveredId);
            $('#' + hoveredId).css('font-size', '14px'); // hovered element gets default font-size
            $('#navigation ul').css('font-size', '13px'); // other elements change to 13px
        }, function()
        {
            $('#navigation ul').css('font-size', '14px'); // other elements change back
        })
    });
};

それもうまくいきません。おそらく、プレーンな CSS ソリューションと同じアプローチだからです。誰でも私を助けることができますか？

私の説明が理解できることを願っています。質問が残っている場合は、質問してください。

4

3 に答える 3

2

HTML:

<div id="container" >
   <div id="children">
   </div>
</div>

CSS:

#container:HOVER #children {
    /* your style */
}

これを試して...

于 2012-10-20T19:55:37.360 に答える
0

特異性の#navigation ul liオーバーライド #navigation ul:hoverのため、ルールセットが機能しないのはそのためです。
リストに「a」を追加します：ホバールールで問題ありません 

#navigation ul:hover a
{
   font-size: 13px;    
}

http://jsfiddle.net/DRJCg/

于 2012-10-20T20:04:50.460 に答える
0

の代わりに#navigation ul、私はそれがあるはずだと思います#navigation ul li

より直接的な方法は、liにクラスを追加し、代わりにそのクラスを指すことです。

私はあなたが関数liを使うので：

function reduceOtherLi(li_to_keep_big){
 var eList = $('#navigation ul li')`//put all the li in an array
    // for each li in the array
    for (i=0; i<eList.length; i++){
        var e = eList[i]; //get current li

        //if it not the clicked one, make the size smalle
        if (e != li_to_keep_big) $(e).css({'font-size':'13px'}); 
        else $(e).css({'font-size':'14px'});
    }
}

次に、マウスオーバーハンドラーを使用して関数をトリガーできます

$("#navigation ul li").mouseover(function() { reduceOtherLi(this);});

それらをリセットするには、次の行を追加するだけです。

$("#navigation ul li").mouseout(function() { $('#navigation ul li').css({'font-size':'14px'});});

基本的には、これをタグに入れるだけで、思いどおりに機能します。

.css（）に注意してください。代わりに、.addClass（）と.removeClass（）を簡単に使用して、そこでフォントサイズ（および他のcssの束）を指定できます。

イベントハンドラーに関しては、「this」はホバーされた要素を表します。そしてli_to_keep_bigとして渡されます。

お役に立てれば。

于 2012-10-20T20:06:00.617 に答える