Question

我有一个翻转菜单，显示一周中的几天。他们原本坐在一起愉快地坐在一起，有一个悬浮在上面的图像。现在，当您将鼠标悬停一天时，我会尝试显示文字和图片。文本在第一天（“周四”）工作，但其余时间没有出现，悬停图像背景也没有出现。

我做错了什么？请继续，我正在努力！

HTML

  <div id="nav">
  <ul class="menu">
  <li>
  <div class="img1 left"> <a href="" id="thursButton" class="thursButton"></a>

  <p>Somewhere Only We Know Lily Allen
  <br/>Story Of My Life One Direction
  <br/>
  </p>
  </div>
    </li>
    <li>

<div class="img2 left"> <a href="" id="friButton" class="friButton"></a>

 <p>Somewhere Only We Know Lily Allen
 <br/>Story Of My Life One Direction
 <br/>
 </p>
  </div>
  </li>
  <li>

CSS

#nav {
display:inline;
list-style: none;
position: fixed;
width: 1290px;
margin: 0 auto; 
left:0px; 
right:0px;
float:clear;
top: 120px;
z-index: 1000;

}
.menu li {
display: inline;
vertical-align:top; 
float:left;

 }
.menu li a {
display: block;
height: 407px;
width:250px;
text-indent: -999999px;
}
.img1 {
width: 250px;
height: 407px;
position: relative;
}
 .thursButton {
  width:250px;
  height:177px;
  display:block;
  }
  #thursButton {
  background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
  }
  .thursButton:hover {
   background-image:url('http://static.tumblr.com/2wdsnoc/6Rxmxht1d/thu-hover.png');
  }
.img2 {
width: 250px;
height: 407px;
position: relative;
}
.satButton {
width:250px;
height:177px;
display:block;
}
#satButton {
background-image:url(http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}
.satButton:hover {
 background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}
.left p {
color: #FFFFFF;
display: none;
font-size: 18px;
left: 10px;
position: absolute;
text-shadow: 1px 1px 1px #000000;
top: 100px;
width: 250px;
}
.left:hover p {

display:block;
}

Answer 1

我认为这看起来有点可见：

<强> HTML

<div id="nav">
    <ul class="menu">
        <li>
            <a href="#" id="thursButton" class="thursButton">
                <div class="img1 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="friButton" class="friButton">
                <div class="img2 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" id="satButton" class="satButton">
                <div class="img3 left">
                    <p>Somewhere Only We Know Lily Allen<br/>Story Of My Life One Direction</p>
                </div>
            </a>
        </li>
    </ul>
</div>

<强> CSS

#nav {
    display:inline;
    list-style:none;
    position:fixed;
    width:1290px;
    margin:0 auto; 
    left:0px; 
    right:0px;
    float:clear;
    top:120px;
    z-index:1000;
}

.menu li {
    display:inline;
    vertical-align:top; 
    float:left;
}

.menu li a {
    display:block;
    height:407px;
    width:250px;
}

.img1 {
    width:250px;
    height:407px;
    position:relative;
}

.thursButton {
    width:250px;
    height:177px;
    display:block;
}

#thursButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/K8umxhswx/thu.png');
}

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

.img2 {
    width:250px;
    height:407px;
    position:relative;
}

.friButton {
    width:250px;
    height:177px;
    display:block;
}

#friButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/9dtmxhsw1/fri.png');
}

#friButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/dCtmxht0o/fri-hover.png');
}

.img3 {
    width:250px;
    height:407px;
    position:relative;
}

.satButton {
    width:250px;
    height:177px;
    display:block;
}

#satButton {
    background-image:url('http://static.tumblr.com/2wdsnoc/drJmxhstf/sat.png');
}

#satButton:hover {
    background-image:url('http://static.tumblr.com/2wdsnoc/qfsmxhstx/sat-hover.png');
}

.left p {
    color:#FFFFFF;
    display:none;
    font-size:18px;
    left:10px;
    position:absolute;
    text-shadow:1px 1px 1px #000000;
    top:100px;
    width:250px;
}

.left:hover p {
    display:block;
}

错误关闭的代码存在多个错误。

我建议使用HTML或CSS验证程序来解决未来的问题：

http://validator.w3.org/适用于HTML

http://jigsaw.w3.org/css-validator/对于CSS

菜单翻转图像和文本仅在一个上工作

1 个答案: