javascript - 如何使 onClick 与悬停在 标签上做同样的事情

Question

我有一个包含 3 个选项卡的 CSS 图片库，将鼠标悬停在每个选项卡的缩略图上时会显示图像。检查片段或网页 http://www.abavela.com/en/charter-sailing-yacht-bavaria-36-1.htm

问题是当您单击缩略图时，浏览器仅加载 jpg，我想像悬停事件一样在画廊中显示它。这在触摸屏上尤其成问题。基本上我希望“li”标签的 onClick 事件与悬停事件做同样的事情。

我想这不能单独用 css 完成，所以我需要一些 Javascript 代码。我在 CSS 中尝试了 active、focus、target 和 Javascript 中的一堆选项，但没有真正成功。

欢迎任何帮助。

a {
  color: #000;
}
a:hover {
  text-decoration: none;
}
a:visited {
  color: #000;
}
.photo {
  width: 744px;
  position: relative;
  height: 534px;
  float: left;
  /* [disabled]margin-bottom: -10px; */
}
.photo ul.topic {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 744px;
  height: 30px;
  position: relative;
  z-index: 10;
}
.photo ul.topic li {
  display: block;
  width: 247px;
  height: 30px;
  float: left;
}
.photo ul.topic li a.set {
  display: block;
  font-size: 11px;
  width: 247px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #999;
  text-decoration: none;
  border: 1px solid #aaa;
  border-width: 1px 1px 0 1px;
  background: #E7E7E7;
  font-family: verdana, arial, sans-serif;
  border-radius: 10px 10px 0px 0px;
  font-weight: bold;
}
.photo ul.topic li a ul,
.photo ul.topic li ul {
  display: none;
}
.photo ul.topic li.active a {
  color: #999;
  background: #E7E7E7;
}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a {
  color: #FFFFFF;
  background: #CCC;
}
.photo ul.topic li.active ul {
  display: block;
  position: absolute;
  left: 0px;
  /* [disabled]top: 32px; */
  list-style: none;
  padding: 0px 0px;
  margin: 0;
  height: 496px;
  background: #ddd;
  width: 741px;
  border: 1px solid #bbb;
  z-index: 1;
}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul {
  display: block;
  position: absolute;
  left: 0;
  top: 31px;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 496px;
  background: #ddd;
  width: 741px;
  padding: 0px 0px;
  border: 1px solid #aaa;
  z-index: 100;
}
.photo ul.topic li ul li {
  display: inline;
  width: 147px;
  height: 78px;
  float: left;
  border: 0px solid #fff;
  margin: 0px;
}
.photo ul.topic li ul li a {
  display: block;
  width: 147px;
  height: 83px;
  cursor: inherit;
  float: left;
  text-decoration: none;
  background: #444;
  border: 0px solid #888;
}
.photo ul.topic li ul li a img {
  display: block;
  width: 147px;
  height: 75px;
  border: 2px solid #eee;
}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img {
  position: absolute;
  left: 0px;
  top: 78px;
  width: 735px;
  height: 413px;
  border-color: #eee;
}
.slikagalerry {
  border: 2px solid #eee;
}

<div class="photo">
  <ul class="topic">
    <li><a class="set" href="#Exterier">EXTERIOR</a>
      <!--[if gte IE 7]><!-->
      <!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-prova.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-prova.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-bok.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-bok.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kabina.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kabina.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kokpit.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-kokpit.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-e-krma.jpg" width="735" height="413" alt="Bavaria 36" title="" class="slikagalerry">
        </li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>

    <li class="active"><a class="set" href="#Interier">INTERIOR</a>
      <!--[if gte IE 7]><!-->
      <!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-ndesk.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-ndesk.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-kuhinja.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-kuhinja.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-wc.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-wc.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-krma.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-krma.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-i-salon.jpg" width="735" height="413" alt="Bavaria 36" title="" class="slikagalerry">
        </li>
      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li><a class="set" href="#Inaction">IN ACTION</a>
      <!--[if gte IE 7]><!-->
      <!--<![endif]-->
      <!--[if lte IE 6]><table><tr><td><![endif]-->
      <ul>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-2.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-2.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-3.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-3.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-4.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-4.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <a href="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg">
            <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="Bavaria 36" title="">
          </a>
        </li>
        <li>
          <img src="http://www.abavela.com/sailing-charter-croatia/bavaria-36-1-a-1.jpg" width="735" height="413" alt="Bavaria 36" title="" class="slikagalerry">
        </li>

      </ul>
      <!--[if lte IE 6]></td></tr></table></a><![endif]-->

    </li>


  </ul>
  <br class="clear" />
</div>

Answer 1

如果您只想防止 jpg 在点击时打开，这应该可以工作。

<script type='text/javascript'>
    $(".photo ul li").click(function(e){e.preventDefault()})
</script>