悬停选项，或javascript

Hover option, or javascript

本文关键字：javascript 选项 悬停      更新时间：2023-09-26

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

我不太明白你的意思

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

将改变图像

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

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

参见此处的示例http://jsfiddle.net/Z7VTy/3/

相关文章：