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