1

我正在制作一个练习网站，并且正在尝试向图像添加悬停效果，该图像是单击后退或前进的箭头。我认为代码有问题，在其结构中，或者我可能需要使用 javascript 来实现翻转效果。

我做了一个小提琴来展示当前的工作：http: //jsfiddle.net/Z7VTy/1/

...我对一切都很陌生。

   <body>
   <div id="slider_wrapper">
    <div id="slider_container">
     <div class="controllers" id="previous"></div>

  <div id="slider">
  <img src="Images/slide_two.png" width="960" height="425" />
  <img src="Images/slide_one.png" width="960" height="425" />
  <img src="Images/slide_three.png" width="960" height="425" />
  </div>                           

  <div class="controllers" id="next"></div>
   </div>         
 </div>
 </body
4

2 回答 2

0

不确定我是否理解您的问题

演示

#previous:hover {
background-image: url(left_on.png);
}

会改变形象

于 2013-05-17T07:45:25.477 回答
0

您可以将 slider_wrapper 容器从 div 更改为标签，并为 slider_wrapper 使用悬停状态。将#previous 和#next 的显示模式更改为none，并添加以下样式

#slider_wrapper:hover #previous, #slider_wrapper:hover #next{
    display:block;
}

在此处查看示例http://jsfiddle.net/Z7VTy/3/

于 2013-05-17T07:52:15.143 回答