多次滚动不起作用

Multiple rollover not working

本文关键字：不起作用 滚动      更新时间：2024-06-01

我使用Dreamweaver创建了多个图像滚动，但在之前的Stackoverflow帖子中，我被告知Dreamweave使用的javascript代码已经过时。因此，我在谷歌上搜索并阅读了使用图像滚动菜单的正确方法。

然而，现在它根本不起作用。我做错了什么？

HTML-

<div id="nav">
<ul class="menu">
<li class="thurs"><a href="#">Thurs</a></li>
<li class="fri"><a href="#">Fri</a></li>
<li class="sat"><a href="#">Sat</a></li>
<li class="sun"><a href="#">Sun</a></li>
<li class="more"><a href="#">More</a></li>

和CSS-

.thurs      { background-image: url (http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png);     }
.thurs a        { background-image: url (http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png);       }
.fri            { background-image: url (http://static.tumblr.com/2wdsnoc/dCtmxht0o/fri-hover.png);         }
.fri a          {background-image: url (http://static.tumblr.com/2wdsnoc/9dtmxhsw1/fri.png);        }
.sat            { background-image: url (http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png);         }
.sat a          {background-image: url (http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png);        }
.sun            {  background-image: url (http://static.tumblr.com/2wdsnoc/Vy4mxhssp/sun-hover.png);        }
.sun a      { background-image: url (http://static.tumblr.com/2wdsnoc/Uekmxhss1/sun.png);       }
.more       { background-image: url (http://static.tumblr.com/2wdsnoc/Bjzmxhsvf/more-hover.png);        }
.more a     {background-image: url (http://static.tumblr.com/2wdsnoc/i8jmxhsuu/more.png);       }

我还制作了一个JSfiddle

使用类似的东西

.menu li a {
    display: block;
    height: 150px;
    width:250px;
    text-indent: -999999px;
}
.thurs a       { background-image: url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');       }
.thurs a:hover { background-image: url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');     }

.fri a       {background-image: url('http://static.tumblr.com/2wdsnoc/9dtmxhsw1/fri.png');      }
.fri a:hover { background-image: url('http://static.tumblr.com/2wdsnoc/dCtmxht0o/fri-hover.png');       }
.sat a       {background-image: url('http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');      }
.sat a:hover { background-image: url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');       }
.sun a       { background-image: url('http://static.tumblr.com/2wdsnoc/Uekmxhss1/sun.png');         }
.sun a:hover {  background-image: url('http://static.tumblr.com/2wdsnoc/Vy4mxhssp/sun-hover.png');      }
.menu li.more a {height: 150px;}
.more a      {background-image: url('http://static.tumblr.com/2wdsnoc/i8jmxhsuu/more.png');         }
.more a:hover{ background-image: url('http://static.tumblr.com/2wdsnoc/Bjzmxhsvf/more-hover.png');      }

http://jsfiddle.net/m772P/13/

但更好的方法是缓存图像并在悬停上更改background-position

您需要显示：块；或者锚上的内联块：）此外，您需要"repeat"answers"position"选项——现在您只需要指定图像本身。

css：

li a {
   display: block;
   padding-left: 20px; /* if you want the image to appear to the left of the text, adjust      the width according to the image size*/
   background-repeat: no-repeat;
   background-position: 0 0;
}

删除url和括号之间的空格。

.thurs {
  background-image: url(http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png);
}

它可能是".turs a"chould是".thurs:hover"，但我不清楚你是如何使用它的细节。

它不起作用，因为你需要：hover css选择器，而你的背景不显示，因为你在"url（".之间有一个空格

在固定这些点的情况下尝试这样的操作：http://jsfiddle.net/m772P/4/

.thurs a        { background-image: url();      }
.thurs a:hover      { background-image: url();      }
相关文章：