Question

虽然我对JavaScript的能力绝对没有，但我能够通过此jsfiddle的previous Stack Overflow post获得Magnific Popup插件。但是，放大光标不会出现，而是手指针。我已经尝试了一些方法，但似乎无法让它正常工作。关于代码中缺少什么的任何解决方案？（不，我没有使用IE浏览器。我正在使用Firefox并且意识到放大光标甚至不能在带有IE的Magnific Popup主页上工作，这是我从CSS收集的CSS3问题。）

（同样，我确实尝试在最初的Stack Overflow帖子中添加评论，但因为我没有50个声望点，所以我无法这样做，所以我正在创建这个新问题。）

提前致谢。

<a name="nameA">
<div class="nameB">

    <div class="test1">
        <div class="test2">
            <h1>Page Title</h1>

            <a class="image-popup-vertical-fit" href="cat.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
                <img src="cat.jpg" width="75" height="75">
            </a>
            <a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
                <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
            </a>
            <a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
                <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
            </a>
        </div>
    </div>
</div>

$(document).ready(function () {        
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    delegate: 'a',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }
});
$('.parent-container').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'image'
    // other options
});
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

$('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
        verticalFit: false
    }
});

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from                left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    }
});

}）;

Answer 1

尝试添加如下的CSS代码段：

a { cursor: -webkit-zoom-in;  cursor: zoom-in; }

放大光标无法使用Magnific Popup

1 个答案: