My website has an image with the cursor set to pointer and a function that should show a hidden element when clicked. However, it's not working at all. When I hover over it or click on it, nothing happens. Here is a screenshot of the issue along with the relevant code. Can anyone help me figure this out? Thanks!
https://i.sstatic.net/RzADb.png
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');
});