Question

我正在制作一个练习网站，我正在尝试为图像添加悬停效果，图像是向后或向前点击的箭头。我假设代码在其结构中有问题，或者我可能需要使用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

Answer 1

不确定我理解你的问题

demo

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

会改变图像

Answer 2

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

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

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

悬停选项，或javascript

2 个答案: