2

私はこのフォーラムをよく見ていて、私の質問の反対を見つけることができます。言い換えると、子のdivにカーソルを合わせたときに、親のdivの背景を変更する方法を探しています。子を変更する方法しか見つかりません。 div、親にカーソルを合わせたとき。

内側に送信ボタンがある親divが1つあります。

<div class="ugd_ele_normal_base">
  <input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->

送信ボタンにカーソルを合わせると、親のcssの背景が変わります。

私はいくつかのことを試しましたが、何もうまくいかないようです。

助けてくれてありがとう

4

5 に答える 5

6

これにはjQueryとCSSを使用します。

CSS

.black {
     background-color: #000000;
}

jQuery

$(function() {
   $('.ugd_ele_normal').hover( function(){
      $(this).parent().addClass("black");
   },
   function(){
      $(this).parent().removeClass("black");
   });
});
于 2012-10-15T22:23:59.613 に答える
4 
$('input.ugd_ele_normal').on({
    mouseenter: function() {
        $(this).parent().css('background', 'url(/folder/image1.jpg)');
    },
    mouseleave: function() {
        $(this).parent().css('background', 'url(/folder/image2.jpg)');
    }
});

または短い（より）バージョン：

$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
     $(this).parent()
            .css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});

古い画像を取得するには：

var bgImg = $('input.ugd_ele_normal').css('background-image'),
    hvImg = 'url(/folder/image2.jpg)';

$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
     $(this).parent()
            .css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});

またはクラスを使用します：

.hoverClass {background: url(/folder/image2.jpg);}

-

$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
   $(this).toggleClass('hoverClass');
});
于 2012-10-15T22:22:07.303 に答える
2

あなたはこのようにすることができます。

$("#ugd_1").hover(function(){
   $(this).parent().css("background","red");
},
 function(){
      $(this).parent().css("background","none");
 });

ライブデモ：

http://jsfiddle.net/Z4QDC/2/

于 2012-10-15T22:23:51.857 に答える
1

これを行うためにjqueryを定義し、カスタムクラスを使用します。

//when the document is loaded, execute the following code
$(document).read(function(){

//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
    //we add the class black to the parent on hover
  $(this).parent().addClass("black");
},
function(){
   //and remove it on exit hover.
   $(this).parent().removeClass("black");
});
});

ここで実際の動作を見ることができます：http： //jsfiddle.net/xBuyC/

于 2012-10-15T22:31:21.280 に答える
0

試す：

$('input[name="ugd_1"]').hover(function() {
    $(this).parent().css('background-color', 'COLOR');
});

それが役に立てば幸い。

于 2012-10-15T22:20:41.043 に答える