Question

我正在使用一些悬停在价格表上工作。你可以在这里看到它：http://lhit.nl/lucid/

如您所见，当您将鼠标悬停在定价表上时，所有div都会切换类。这不是我想要的。我希望它是单独的。

我的jQuery：

$('.package').hover(function(){
     $('.name').toggleClass('name-hover')
     $('.price-container').toggleClass('price-hover')
     $('.price').toggleClass('white-hover')
     $('.month').toggleClass('white-hover')
 });

css只是覆盖当前颜色：

    .package .price-hover {
        background: #008ed6;
    }

    .package .white-hover {
        color: #fff;
    }

我已经尝试过使用$（this），但它没有用。

Answer 1

private interface MessageHandler {
    void handle(Message msg);
}

private static class TypedMessageHandler<M extends Message> {
    private final Class<M> clazz;

    public TypedMessageHandler(M clazz) {
        this.clazz = clazz;
    }

    public void handle(Message msg) {
        if (msg == null || clazz.isAssignableFrom(msg.getClass()) {
            handleInternal((M) msg);
        } else {
            // your error logic
        }
    }

    abstract protected void handleInternal(M msg);
}

private static class LoginMessageHandler extends TypedMessageHandler<LoginMessage> {

    public LoginMessageHandler() {
        super(LoginMessage.class);
    }

    protected void handleInternal(LoginMessage msg) {System.out.println(msg);}
}

private static class LogoutMessageHandler extends TypedMessageHandler<LogoutMessage> {

    public LogoutMessageHandler () {
        super(LogoutMessage.class);
    }

    protected void handleInternal(LogoutMessage msg) {System.out.println(msg);}
}

Answer 2

这可以通过css简单地实现。为什么要为此添加J？

package:hover .price-container{
    background: #008ed6;
}

Answer 3

你可以使用each（）：

  $('package').each(function() {
    var _this = this;
    $(this).hover(function() {
      $(_this).find('.name').toggleClass('name-hover')
      $(_this).find('.price-container').toggleClass('price-hover')
      $(_this).find('.price').toggleClass('white-hover')
      $(_this).find('.month').toggleClass('white-hover')
    });
  })

Answer 4

首先，您需要使用find来仅更改元素的类在当前徘徊在.package之内，否则它会更改所有这些元素的类。
其次，hover事件需要 2个功能，一个是鼠标进入悬停区域，另一个是光标离开悬停区域。处理hover事件的方式，它会两次切换类，一次悬停，一次悬停，最后保持与以前相同。

试试这段代码：

$('.package').hover(function(){
     $(this).find('.name').addClass('name-hover');
     $(this).find('.price-container').addClass('price-hover');
     $(this).find('.price').addClass('white-hover');
     $(this).find('.month').addClass('white-hover');
 }, function(){
     $(this).find('.name').removeClass('name-hover');
     $(this).find('.price-container').removeClass('price-hover');
     $(this).find('.price').removeClass('white-hover');
     $(this).find('.month').removeClass('white-hover');
 });

Answer 5

$(".package").hover(function() {
    $this = $(this);
    $this.find(".name").toggleClass("name-hover");
    $this.find(".price-container").toggleClass("price-hover");
    $this.find(".price,.month").toggleClass("white-hover");
});

@Spartak Lalaj从jQuery 1.4开始，.hover（）可能有一个参数。见https://api.jquery.com/hover/

ToggleClass不在所有div上

5 个答案: