Onmouseenter / Onmouseleave fadeOut不会工作

时间:2016-12-14 14:56:21

标签: jquery fadeout

当悬停.f_bb div时,它应该只显示.f_bloc并为其添加一个类。当悬停结束时(当光标不在时),它应淡出并隐藏。但出于某种原因,我无法使其发挥作用。

HTML

<div id="fc3"><div class="f_bb">test
<div class="f_bloc">roat</div></div></div>

CSS

.test {color: red}
.f_bloc {display: none}

JS

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseenter(function() {
        $(this).closest(".f_bloc").show();
        $(this).closest(".f_bloc").addClass("test");
    });
});

$(document).ready(function() {
    $("#fc3 .f_bb").onmouseleave(function() {
        $(this).closest(".f_bloc").fadeOut( 1000, function() {
            $(this).closest(".f_bloc").hide();
        });
    });
});

Jsfiddle:https://jsfiddle.net/ebcm08tL/ 更新 https://jsfiddle.net/ebcm08tL/2/

5 个答案:

答案 0 :(得分:1)

一个好方法是首先取消绑定任何现有事件(可以指定名称)以避免重复:

    $("#fc3 .f_bb").unbind('mouseenter.fc3').on('mouseenter.fc3', function (event) {
        // mouseenter actions
    });

    $("#fc3 .f_bb").unbind('mouseleave.fc3').bind('mouseleave.fc3', function (event) {
        // mouseleave actions
    });

答案 1 :(得分:0)

jQuery使用.mouseenter().mouseleave(),而不是.onmouseenter().onmouseleave()

答案 2 :(得分:0)

问题是您使用了CREATE TABLE public.art_almacen ( cart_almacen integer NOT NULL DEFAULT nextval('seq_art_almacen'::regclass), calmacen integer NOT NULL, carticulo integer NOT NULL, cant numeric(11,2) NOT NULL, CONSTRAINT fk_art_almacen PRIMARY KEY (cart_almacen) USING INDEX TABLESPACE sistema_index ) 方法。使用.closest()方法对我来说很好,如果你没有,你还必须包含jquery。

&#13;
&#13;
.children()
&#13;
$(document).ready(function() {
$("#fc3 .f_bb").mouseover(function() {
  $(this).children(".f_bloc").show();
  $(this).children(".f_bloc").addClass("test");
 });
});

$(document).ready(function() {
$("#fc3 .f_bb").mouseleave(function() {
  $(this).children(".f_bloc").fadeOut( 1000, function() {
  $(this).children(".f_bloc").hide();
  });
 });
});
&#13;
.test {color: red}
.f_bloc {display: none}
&#13;
&#13;
&#13;

答案 3 :(得分:0)

尝试在包含id文字的div添加roat,然后尝试使用children()代替closest() div作为$(document).ready(function() { $("#fc3 .f_bb").mouseenter(function() { $(this).children("#block").show(); $(this).children("#block").addClass("test"); }); $("#fc3 .f_bb").mouseleave(function() { $(this).children("#block").fadeOut(1000, function() { $(this).children("#block").hide(); }); }); });试图找到的确实是孩子。

工作演示

&#13;
&#13;
.test {
  color: red
}
.f_bloc {
  display: none
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fc3">
  <div class="f_bb">test
    <div id="block" class="f_bloc">roat</div>
  </div>
</div>
&#13;
@objc
class Fetcher: NSObject,  PHPhotoLibraryChangeObserver {
    private var imageManager = PHCachingImageManager()
    private var fetchResult: PHFetchResult!

    override init() {
        let options = PHFetchOptions()
        options.sortDescriptors = [ NSSortDescriptor(key: "modificationDate", ascending: true) ] // or "creationDate"
        self.fetchResult = PHAsset.fetchAssetsWithMediaType(.Image, options: options)
        super.init()
        PHPhotoLibrary.sharedPhotoLibrary().registerChangeObserver(self)
    }

    deinit {
        PHPhotoLibrary.sharedPhotoLibrary().unregisterChangeObserver(self)
    }

    func photoLibraryDidChange(changeInstance: PHChange) {
        // Photos may call this method on a background queue; switch to the main queue to update the UI.
        dispatch_async(dispatch_get_main_queue()) { [weak self]  in
            guard let sSelf = self else { return }

            if let changeDetails = changeInstance.changeDetailsForFetchResult(sSelf.fetchResult) {
                let updateBlock = { () -> Void in
                    self?.fetchResult = changeDetails.fetchResultAfterChanges
                }
            }
        }
    }

    func requestLastCreateImage(targetSize:CGSize, completion: (UIImage) -> Void) -> Int32 {
        let asset  = self.fetchResult.lastObject as! PHAsset
        let options = PHImageRequestOptions()
        options.deliveryMode = .HighQualityFormat
        return self.imageManager.requestImageForAsset(asset, targetSize: targetSize, contentMode: .AspectFill, options: options) { (image, info) in
            if let image = image {
                completion(image)
            }
        }
    }

    func requestPreviewImageAtIndex(index: Int, targetSize: CGSize, completion: (UIImage) -> Void) -> Int32 {
        assert(index >= 0 && index < self.fetchResult.count, "Index out of bounds")
        let asset = self.fetchResult[index] as! PHAsset
        let options = PHImageRequestOptions()
        options.deliveryMode = .HighQualityFormat
        return self.imageManager.requestImageForAsset(asset, targetSize: targetSize, contentMode: .AspectFill, options: options) { (image, info) in
            if let image = image {
                completion(image)
            }
        }
    }

    func requestFullImageAtIndex(index: Int, completion: (UIImage) -> Void) {
        assert(index >= 0 && index < self.fetchResult.count, "Index out of bounds")
        let asset = self.fetchResult[index] as! PHAsset
        self.imageManager.requestImageDataForAsset(asset, options: .None) { (data, dataUTI, orientation, info) -> Void in
            if let data = data, image = UIImage(data: data) {
                completion(image)
            }
        }
    }
}
&#13;
&#13;
&#13;

答案 4 :(得分:0)

我认为你的问题是最近的(),我使用find()找到你想要的课程

&#13;
&#13;
$(document).ready(function() {
  $("#fc3 .f_bb").mouseenter(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.show();
    f_bloc.addClass('test');


  });
  $("#fc3 .f_bb").mouseleave(function() {
    var f_bloc = $(this).children(".f_bloc");
    f_bloc.fadeOut( 1000, function() {
      f_bloc.hide();
    });
  });                
});
&#13;
.test {color: red}
.f_bloc {display: none  }  
&#13;
<div id="fc3">
  <div class="f_bb">
    test

    <div class="f_bloc"> roat </div>
  </div>
</div> 
<script src="https://code.jquery.com/jquery.js"></script>
&#13;
&#13;
&#13;