如何使 onClick 与 Hover on <li> 标签做同样的事情答案

【问题标题】：How to make onClick do the same thing as Hover on <li> tag如何使 onClick 与 Hover on <li> 标签做同样的事情
【发布时间】：2016-02-04 14:32:49
【问题描述】：

我有一个带有 3 个选项卡的 CSS 图像库，并且在将鼠标悬停在每个选项卡的缩略图上时会显示图像。查看sn-p或网页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>

【问题讨论】：

标签： javascript css onclick hover html-lists

【解决方案1】：

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

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

【讨论】：

是的，这就是我想要的。我认为缺少一个 } :) 但它仍然不起作用 :( 但你给了我一个想法。所以解决方案非常简单。我可以在每个链接上使用 onclick="return false;" 。非常感谢 abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg" onclick="return false;">abavela.com/sailing-charter-croatia/bavaria-36-1-i-prova.jpg" width="735" height="413" alt="Bavaria 36" title="">