放大悬停在实时预览中工作;不在服务器上

时间：2016-12-13 03:47:40

标签： jquery html css

我找到了一个缩放悬停片段，该片段在我的Brackets实时预览中有效，但在我将页面上传到我的网站时却没有。我希望我已经发布了重现问题所需的所有代码。当我将鼠标悬停在图像上时，即使它在实时预览中有效，也没有任何反应。我很感激有关如何解决问题的任何反馈。

#gallery {
    width: 300px;  
    height: 3600px;
    float: left;
    padding-top: 0px;
    padding-bottom: 20px;
    }
#gallery p:nth-child(2n+4) {
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    border-bottom: 1px solid black;
    }
#centerHover {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    line-height: 14px;
    padding: 0 1em 0;
    margin-top: 10px;
    text-align: justify;       
    }
h1 {
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    padding-top: 9px;
    padding-bottom: 11px;
    border-top: 2px solid #FAA91D !important;
    border-bottom: 2px solid #FAA91D !important;
    }
.img-zoom {
    width: 310px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
.transition {
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    }


<div id="gallery">
                <h1>Image Gallery</h1>
                <p id="centerHover">Center image vertically on page and hover to enlarge.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="259" height="387"></p>
                <p>Alexander Lewis's warrant to survey 200 acres of "second rate land" on the west fork of Pond River.  Robert Mosby &#40;among others&#41; was a witness.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17900212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="259" height="387"></p> 
                <p>Alexander Lewis's survey dated 12 Feb 1799 for the above warrant.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="259" height="387"></p>
                <p>Alexander Lewis transferred his 200 acre survey to Benjamin P Campbell on 1 May 1805.  Alexander's son Robert was a witness.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
            </div>

   <script src="jquery.js"></script>  

   <script>

       //THIS IS THE JS FROM THE DEMO

    $(document).ready(function(){
    $('.img-zoom').hover(function() {
        $(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
  });

       //THIS IS THE END OF THE JS FROM THE DEMO
</script>

2 个答案:

答案 0 :(得分：0)

您已使用此标记了jQuery，但未在您的问题中添加任何jQuery代码。

你是否在悬停效果中使用jQuery？我知道这听起来很愚蠢，但我个人犯了错误，在本地使用jQuery而不是将我正在使用的jQuery min文件上传到我的服务器。

答案 1 :(得分：0)

你必须使用属性

img-zoom:hover

而不是img-zoom

看看这个：

＆＃13;
＆＃13; 
#gallery {
    width: 300px;  
    height: 3600px;
    float: left;
    padding-top: 0px;
    padding-bottom: 20px;
    }
#gallery p:nth-child(2n+4) {
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    border-bottom: 1px solid black;
    }
#centerHover {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    line-height: 14px;
    padding: 0 1em 0;
    margin-top: 10px;
    text-align: justify;       
    }
h1 {
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    padding-top: 9px;
    padding-bottom: 11px;
    border-top: 2px solid #FAA91D !important;
    border-bottom: 2px solid #FAA91D !important;
    }
.img-zoom:hover {
    width: 310px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
.transition {
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    }
＆＃13; 
<div id="gallery">
                <h1>Image Gallery</h1>
                <p id="centerHover">Center image vertically on page and hover to enlarge.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="259" height="387"></p>
                <p>Alexander Lewis's warrant to survey 200 acres of "second rate land" on the west fork of Pond River.  Robert Mosby &#40;among others&#41; was a witness.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17900212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="259" height="387"></p> 
                <p>Alexander Lewis's survey dated 12 Feb 1799 for the above warrant.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="259" height="387"></p>
                <p>Alexander Lewis transferred his 200 acre survey to Benjamin P Campbell on 1 May 1805.  Alexander's son Robert was a witness.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
            </div>
＆＃13;
＆＃13;
＆＃13;

解决方案2：

使用Jquery：

＆＃13;
＆＃13; 
$('.img-zoom').hover(function() {
        $(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
＆＃13; 
#gallery {
    width: 300px;  
    height: 3600px;
    float: left;
    padding-top: 0px;
    padding-bottom: 20px;
    }
#gallery p:nth-child(2n+4) {
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    border-bottom: 1px solid black;
    }
#centerHover {
    font-family: "jaf-bernina-sans-narrow";
    font-size: .9em;
    line-height: 14px;
    padding: 0 1em 0;
    margin-top: 10px;
    text-align: justify;       
    }
h1 {
    font-size: 1.2em;
    font-variant: small-caps;
    text-align: center;
    padding-top: 9px;
    padding-bottom: 11px;
    border-top: 2px solid #FAA91D !important;
    border-bottom: 2px solid #FAA91D !important;
    }
.img-zoom {
    width: 310px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    }
.transition {
    -webkit-transform: scale(2.5); 
    -moz-transform: scale(2.5);
    -o-transform: scale(2.5);
    transform: scale(2.5);
    transform-origin: 0% 40%;
    }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="gallery">
                <h1>Image Gallery</h1>
                <p id="centerHover">Center image vertically on page and hover to enlarge.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17981019_ky_christian_war_1197.jpg" class="img-thumbnail" alt="lewis land warrant" width="259" height="387"></p>
                <p>Alexander Lewis's warrant to survey 200 acres of "second rate land" on the west fork of Pond River.  Robert Mosby &#40;among others&#41; was a witness.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_17900212_ky_christian_sur_1197.jpg" class="img-thumbnail" alt="lewis land survey" width="259" height="387"></p> 
                <p>Alexander Lewis's survey dated 12 Feb 1799 for the above warrant.</p>
                <p><img class="img-zoom" src="http://bartonlewis.com/_images/pg_p_lewis_alex_18050501_ky_christian_trn_1197.jpg" class="img-thumbnail" alt="lewis land transfer" width="259" height="387"></p>
                <p>Alexander Lewis transferred his 200 acre survey to Benjamin P Campbell on 1 May 1805.  Alexander's son Robert was a witness.  Campbell transferred it to Smith Lofland on 13 Nov 1806.</p>
            </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题