Question

我在尝试向滑块中的图像添加超链接时遇到问题。我知道图片不能在Jquery滑块中点击，因此我在html中试过这个：

<div class="wrapper">
<div class="slider">
    <ul class="items">
        <li>
          <img src="img/img1.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open google website." onclick="window.open('http://www.google.com/'); return true;"></div>
            <a href="http://www.google.com">
              <span>Click here to open google website.</span>
            </a>
          </div>
        </li>
        <li>
          <img src="img/img2.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open yahoo website."  onclick="window.open('http://www.yahoo.com'); return true;"></div>
            <a href="http://www.yahoo.com">
              <span>Click here to open yahoo website.</span>
            </a>
          </div>
        </li>
        <li>
          <img src="img/img3.jpg" alt="" />
          <div class="slider-banner">
            <div class="imageLink" title="Click here to open Gmail website"  onclick="window.open('http://www.gmail.com/'); return true;"></div>
              <a href="http://www.gmail.com/">
                <span>Click here to open Gmail website.</span>
              </a>
            </div>
        </li>
    </ul>
</div>

对于CSS：

.imageLink {width: 950px;height: 400px;margin-top: -440px;cursor: pointer;}

每次保存和预览时，都不会显示任何文本，也无法在滑块内单击图像，就好像我所做的更改实际上是不可见的... 我非常确定它的解决方法非常简单，但我看不出代码中缺少什么。

这是我正在修改的网站的参考链接： http://www.free-css.com/free-css-templates/page149/progress

请帮忙。

Answer 1

你需要拥有＆＃34; imageLink＆＃34;班级适用于

 <a class="imageLink" href="http://www.gmail.com/">

除非您将链接样式作为子类类合并到该css类中

不要复杂化，你需要在你的css中有子类

.class1
{
    border:1px solid black;
}
.class1.img
{
define your style

}

如何在查询滑块中为图像添加超链接

1 个答案: