0

マウスオーバーで色の変更と画像の変更を行うのに問題があります（Jqueryを使用するか、可能であればCSSを使用します）が、最初の要素のみが変更されるか、すべてが変更されるという問題があります（IDを使用）デザインのすべての要素の /CLASS)、これが私の html であり、私のデザインの CSS です。

CSS:

#button_id {
    margin: 5px;
    display: block;
}

#button_nav {
    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

HTML:

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

次のようにjQueryを使用してみました：

$(".button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(".button_id").css('color','#0365b9');
}).mouseout(function() {
    $(".button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $(".button_id").css('color','#8C8C8C');
});

私はそれで遊んでみましたが、2 つの状況に陥りました。

  1. 全員が色を変えたとき + 背景画像
  2. 最初の div ( id="button_id" class="button_id" ) のみが変更されました。

クラス/ IDを切り替えて遊んでみましたが解決できませんでした。また$("#this")、色でのみ機能するものを使用してみました（画像は他のdivであるため、.childrenも使用しようとしましたが、よくわかりませんでした他のdivに設定する方法、私は次のようなものを試しました

$(this).children(("#element")).css(..)

しかし、うまくいきませんでした:(

4

6 に答える 6

1

これを試して：

$(document).ready(function() {
    $(".button_id").hover(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}, function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });
});
于 2013-03-28T13:38:05.523 に答える
0

使ってみてmouseenter()、mouseleave()

ライブデモはこちら

HTML

<div id="button_1" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_2" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Contact Us</div>
        <div id="clear"></div>
    </div>
</div><br/>
<div id="button_3" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Corporate Queries</div>
        <div id="clear"></div>
    </div>
</div>

CSS

.button_id {
    margin: 5px;
    display: block;
    border:1px dotted red;
}


#button_nav {

    display: inline;
}

#button_img {
    background-image: url('images/left_nav_button.gif');
    width: 11px;
    height: 11px;
    float: left;
}

jQuery

    $(".button_id").mouseenter(function() {
    $("#button_img", this).css('background-image', 'url(images/left_nav_button_hover.gif)');
    $(this).css('color', '#0365b9');
}).mouseleave(function() {
    $(".button_img", this).css('background-image', 'url(images/left_nav_button.gif)');
    $(this).css('color', '#8C8C8C');
   });
于 2013-03-28T13:32:38.340 に答える
0

あなたの質問を正しく理解していれば、複数の<div id="button_id" class="button_id">コンテナがあります..?

もしそうなら、それが問題かもしれません - それぞれidがユニークでなければなりません。s を削除して、idクラスに固執してみてください ( JSFiddleの例)。

于 2013-03-28T13:40:27.087 に答える
0

私はこれらの努力をすべて捨てて、css スプライトを使用して、あなたがやろうとしていることを行います。自分で物事を難しくしないでください。画像の高さを正確に 2 倍にして、ホバー画像を下部に配置します。次に、その画像を背景として a href に追加し、ユーザーが a href または div またはこれがすべてで機能するものにカーソルを合わせると、css の div :hover の後に追加します。background-position を上ではなく下に変更します。完了.. デモが必要な場合は、ドロップできますが、これは一言で言えばスプライトです。

于 2013-03-28T13:40:31.720 に答える
0

あなたが私たちに与えた場合、単純なホバー変更を行うためにJavaScriptを使用する必要はありません.とにかくCSSの変更を行うだけなので:

CSS

.button_id {
    background: #000000 url(/path/to/image) top left no-repeat;
}
.button_id:hover {
    background: #ff0000 url(/path/to/image2) top left no-repeat;
}

HTML

<div id="button_id" class="button_id">
    <div id="button_nav"> 
        <div id="button_img" class="button_img"></div>
        <div id="button_name" class="button_name">Employment & skills</div>
        <div id="clear"></div>
    </div>
</div>

CSS以外のことをしたい場合は、次の関数を使用できますhover()。

jQuery( function($) {
    $('.button_id').hover(
        function() {
            // Do mouseover stuff here
        },
        function() {
            // Do mouseout stuff here
        }
});
于 2013-03-28T13:42:18.563 に答える
0

(最初: ID は一意でなければならないため、質問に投稿した html もページに一意であると想定します)

コードで実際に何をしようとしているのかを理解しようとしていますが、正直言ってあまり意味がありません。1 つの要素を変更するには:

<div id="button_id">
      <div id="button_nav"> 
            <div id="button_img"></div>
            <div id="button_name">Employment & skills</div>
            <div id="clear"></div>
      </div>
</div>

$("#button_id").mouseover(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)');
    $("#button_id").css('color','#0365b9');
}).mouseout(function() {
    $("#button_img").css('background-image', 'url(images/left_nav_button.gif)');
    $("#button_id").css('color','#8C8C8C');
});

いくつかの要素を変更するには、通常はクラスを使用しますが、css の外観が異なります。

.button_Class {
    /*foo*/
}

<div class="button_Class">

$(".button_Class").css('foo','bar');

等

于 2013-03-28T13:56:06.273 に答える