Question

我有这个HTML代码：

<div class="imgContent">
    <div id="galleryImg">
        <img class="img_<?php echo $this->id ?>_1" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[1]) ?>" />
        <?php if($this->image[4]){ ?>
            <img class="img_<?php echo $this->id ?>_<?php echo $this->image[6] ?>" style="display:none" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[4]) ?>" />
        <?php } ?>
        <?php if($this->image[5]){ ?>
          <img class="img_<?php echo $this->id ?>_<?php echo $this->image[7] ?>" style="display:none" width="1200" height="450" src="<?php echo $this->baseUrl('f/images/'.$this->image[5]) ?>" />
        <?php } ?>
    </div>  
    <a id="prev" href="javascript:void(0)"></a>
    <a id="next" href="javascript:void(0)"></a>
</div>

我想在悬停在图片上时从png文件中添加箭头。怎么做（图片现在点击更改）

Answer 1

假设您的意思是说当您悬停a#prev时a#next和div#galleryImg应该有箭头，而不是非常确定这是否是您想要的，那么您可以使用纯粹的css使用某些东西类似于：

a#prev, a#next {
    display: inline-block;
    width: 20px;
    height: 20px;
}
div#galleryImg:hover + a#prev { background-image: url(prev.png); }
div#galleryImg:hover + a#prev + a#next { background-image: url(next.png); }

当然，您应该根据图像的正确尺寸调整宽度和高度，并为图像添加正确的网址。

在滑块上添加导航

1 个答案: