图像悬停/ onclick问题

时间:2015-12-10 16:56:50

标签: javascript html css wordpress

我的网站上有一个设置为光标的图像:指针;以及单击时显示隐藏元素的功能。由于某种原因,它根本不起作用。当我将鼠标悬停在它上面或点击它时没有任何反应。下面是截图和代码。谢谢!

enter image description here

HTML:

  <div class="font-wrap">
    <div class="wrapper">
      <p class="talk-bubble">
       Join the Conversation
      </p>
        <p class="sign-in">
          Sign In to Comment
        </p>
        <img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />
    </div>

CSS:

.pagecontent .cols .col.two .font-wrap {
  font-family: Verdana;
}

.pagecontent .cols .col.two .wrapper {
  position:relative;
  padding-bottom:0px;
  background-color:#ffffff;
  z-index:-2;
}   
.pagecontent .cols .col.two .wrapper .sign-in-img {
  position:absolute;
  bottom:0;
  right:0;
  width:40px;
  height:40px;
  cursor: pointer;
}

.pagecontent .cols .col.two .wrapper .sign-in-img:hover {
  cursor: pointer;
}

.pagecontent .cols .col.two .sign-in {
  text-align:right;
  margin:0;
  margin-right:50px;
  padding:0;
  font-size: .6em;
  color: #808C8D;
}

.pagecontent .cols .col.two .talk-bubble {
  border:1px solid #3A7DBA;
  padding: 15px;
  background-color:#CDE5F7;
  position:relative;
  margin-right:60px;
  color: #3A7DBA;
}

.pagecontent .cols .col.two .talk-bubble:before, .talk-bubble:after {
  box-sizing:border-box;
  padding:0;
  content:'';
  width: 20px;
  height:20px;
  display:block;
  position:absolute;
  border:20px solid transparent;
}

.pagecontent .cols .col.two .talk-bubble:before {
  z-index:-1;
  border-bottom:20px solid #3A7DBA;
  right:-12px;
  bottom:-1px;
}

.pagecontent .cols .col.two .talk-bubble:after {     
  border-bottom:20px solid #CDE5F7;
  right:-10px;
  bottom:0px;
}

JS:

  $( ".sign-in-img" ).click(function() {
    $('.comments-container').show('slow');
  });

1 个答案:

答案 0 :(得分:1)

它与您的选择器有关:

.pagecontent .cols .col.two .wrapper .sign-in-img

这并不是指向想要的图像。 使用它可以工作:

.sign-in-img{
  cursor: pointer;
}

顺便说一下,如果你经常使用它我会建议你把这个css代码:

.cursPoint{
  cursor: pointer;
}

然后在您正在使用它的所有标签中添加类curspoint!例如

<img class="sign-in-img cursPoint" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" />