Question

我使用Dreamweaver创建了多个图像翻转，但在之前的Stackoverflow帖子中告诉我，Dreamweaver使用的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

Answer 1

使用类似的东西

.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

Answer 2

你需要显示：块;或锚点上的内联块:)此外，您需要“重复”和“位置”的选项 - 现在您只是指定图像本身。

的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;
}

Answer 3

删除网址与空心括号之间的空格。

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

可能是“。我们的”应该是“.thurs：hover”，但我不清楚你如何使用它的细节。

Answer 4

它无效，因为您需要：hover css选择器，并且您的背景未显示，因为“url（”。

之间有空格

尝试使用这些点修复这些点：http://jsfiddle.net/m772P/4/

.thurs a        { background-image: url();      }
.thurs a:hover      { background-image: url();      }

多次翻转无效

4 个答案: