0

我对网页设计真的很陌生，并且一直在尝试复制我在代码学校学习的课程中看到的这种 slideToggle() 效果。所以底线是当您按下按钮时，照片会出现，然后当您将鼠标悬停在照片上时，会出现带有照片描述的文字。我认为问题出在 css 上，因为它没有包含在代码学校的 jQuery 课程中。因此，如果有人可以帮助我解决这个问题，因为我玩得越多，我就越能理解它，我相信这可能是一个简单的问题，但我已经学习了 2 周，其中一周用于这个（开和关）所以我不得不寻求帮助！这是所有包含文件的链接http://jsfiddle.net/HtRNk/1/ hmm 看起来我必须在此处包含代码

CSS：

ul{
    list-style-type:none;
}
ul li {
    display: inline;
}

.photos{

    display:none;
}
span{
    font-size:10px;
    color:#CCCCCC;
    position:relative;
    right:150px;
    bottom:3px;
    display: none;
}

img{
    width:150px;
    height:137px;
}

jQuery：

function showPhotos(){
    $(this).find('span').slideToggle();
}

$(document).ready(function(){
    //EVENT HANDLER FOR CLICK EFFECT

    $('#teams').on('click','button',function(){
    $('.photos').slideToggle();
  });

    $('.photos').on('mouseenter','li',showPhotos);
    $('.photos').on('mouseleave','li',showPhotos);

HTML：

<div id="teams">
   <h2>My Favourite Sports Teams</h2>
   <p>I love all sports but<em> hockey</em> and <em> football </em>are my favourites</p>
   <button>See team logo's </button>
   <ul class="photos">
     <li>
       <img  src="Sports_site/Images/Canucks/canucks_logo1.gif"><span>Vancouver Canucks (NHL)</span> </li>
     <li>
       <img   src="Sports_site/Images/BCLions/bcLions_logo1.JPG">
       <span> BC Lions (CFL) </span>
     </li>
     <li>
       <img  src="Sports_site/Images/Whitecaps/caps_logo3.jpg">
       <span> Vancouver Whitecaps (MLS) </span>
     </li>
     <li>
       <img src="Sports_site/Images/BlueJays/blue_jays_logo1.gif">
       <span> Toronto BlueJays (MLB) </span>
     </li>
     <li>
       <img src="Sports_site/Images/Seahawks/Glow_seahawks_logo.jpg">
       <span> Seattle Seahawks (NFL) </span>
     </li>
   </ul>

谢谢，丹尼斯

4

1 回答 1

0

您的示例不起作用，但根据您上面的代码，这是我的答案。

如果您不希望lis 在添加文本时四处移动（或者更具体地说，在span切换 s 时），请尝试使用display: inline-block并设置宽度和高度。这样lis 不会改变大小，因此在添加内容时不会四处移动。

于 2013-07-31T00:56:21.113 回答