如何使onClick执行与<li>标记上的悬停相同的操作

时间：2016-02-02 23:01:41

标签： javascript css onclick hover html-lists

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

问题是当你点击缩略图浏览器加载jpg时，我想像在悬停事件中一样在画廊中显示它。这在触摸屏上尤其成问题。基本上我想要on＆＃34; li＆＃34;标记与悬停事件做同样的事情。

我想单靠css无法做到这一点所以我需要一些Javascript代码。我在Javascript中尝试了主动，专注，目标css和一堆选项，但没有取得真正的成功。

欢迎任何帮助。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

如果您想要的是阻止点击时打开jpg，这应该有用。

<script type='text/javascript'>
    $(".photo ul li").click(function(e){e.preventDefault()})
</script>
相关问题
最新问题