Question

我已经浏览了很多这个论坛，只能找到与我的问题相反的内容，换句话说，我想找到当孩子div徘徊时如何更改父div的背景，我只能找到如何当父母徘徊时，改变子div。

我有一个带有内部提交按钮的父div：

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

我想要的是当提交按钮悬停时，父css会改变背景。

我尝试了一些事情，但似乎没有任何效果。

感谢您的帮助

Answer 1

我会使用jQuery＆amp; CSS的目的：

CSS

.black {
     background-color: #000000;
}

的jQuery

$(function() {
   $('.ugd_ele_normal').hover( function(){
      $(this).parent().addClass("black");
   },
   function(){
      $(this).parent().removeClass("black");
   });
});

Answer 2

$('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');
});

Answer 3

你可以这样做。

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

现场演示：

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

Answer 4

我会定义一些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/

Answer 5

尝试：

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

希望它有所帮助。

在子悬停时更改父css

5 个答案: