Question

我为我的网站创建了以下代码段，以便使用一些JQuery对我的图片进行滑动悬停效果： -

http://bootsnipp.com/user/snippets/Oelm8

JQuery函数在代码片段中正确执行，但是当我的网站现有代码实现时，我遇到了悬停效果的一个奇怪问题：当鼠标悬停在image上时，动画'暂停'时它到达光标。我在SO上寻找任何答案，但我正在努力;什么可能导致这个？

非常感谢提前。

<div id="summary-row">
    <div class="container">
        <div class="row">

        <div class="col-xs-12 col-sm-6 col-md-3">                
            <div class="image">
                <div class="caption">
                    <h2>About Me</h2>
                    <a href=""><button type="button" class="btn btn-default" rel="tooltip" title="">Find out more</button></a>
                </div>
                <div class="image" rel="tooltip">
                    <a href="about.html"><img alt="Biography" class="img-responsive" src="images/about700x700.jpg" width="350" height="auto"/></a>
                </div>                 
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">                
            <div class="image">
                <div class="caption">
                    <h2>Skills and Experience</h2>
                    <a href=""><button type="button" class="btn btn-default" rel="tooltip" title="">Find out more</button></a>
                </div>
                <div class="image" rel="tooltip">
                    <a href="portfolio.html"><img alt="Biography" class="img-responsive" src="images/skills700x700.jpg" width="350" height="auto"/></a>
                </div>                 
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">                
            <div class="image">
                <div class="caption">
                    <h2>Portfolio</h2>
                    <a href=""><button type="button" class="btn btn-default" rel="tooltip" title="">Find out more</button></a>
                </div>
                <div class="image" rel="tooltip">
                    <a href="portfolio.html"><img alt="Biography" class="img-responsive" src="images/portfolio700x700.jpg" width="350" height="auto"/></a>
                </div>                 
            </div>
        </div>

        <div class="col-xs-12 col-sm-6 col-md-3">                
            <div class="image">
                <div class="caption">
                    <h2>Blog</h2>
                    <a href=""><button type="button" class="btn btn-default" rel="tooltip" title="">Find out more</button></a>
                </div>
                <div class="image" rel="tooltip">
                    <a href="blog.html"><img alt="Biography" class="img-responsive" src="images/blog700x700.jpg" width="350" height="auto"/></a>
                </div>                 
            </div>
        </div>
        </div>
    </div>
</div>

JQuery - 在我的HTML表单的脚下： -

<script>
$( document ).ready(function() {
    $("[rel='tooltip']").tooltip();    

    $('.image').hover(
        function(){
            $(this).find('.caption').slideDown(300); //.fadeIn(250)
        },
        function(){
            $(this).find('.caption').slideUp(300); //.fadeOut(205)
        }
    ); 
});
</script>

CSS：

.caption {
    position:absolute;
    top:0;
    right:0;
    background:rgba(0, 0, 0, 0.4);
    width:100%;
    height:100%;
    display: none;
    text-align:center;
    color:#fff !important;
    z-index:2;
}

My website

Twitter Bootstrap中的JQuery悬停效果问题

0 个答案: