How do I make my "X" look like a hand or arrow hovering over it while closing out my Div in jQuery?

Question

Alright, I know how to close the div using a "p" tag just fine with jQuery. The code for that is below. However I don't want the client to have a cursor appear over the "X", I want the "X" to be an arrow hovering over it or a hand like it would be with an "a" tag. However when I use an "a" tag it reloads the page which defeats the purpose of what I am trying to do. Logically I would think I would need to use the preventDefault() syntax, but I tried that, but maybe I didn't do it right since I'm a noob. Any help would be apperciated.

Jquery below...

    function closer() {
        $(document).ready(function(){
           $("#closeX").click(function(){
              $("#closeX").hide();
              $("#popArt").hide();
            });
        });
    }

HTML Below...

       <div id="popArt">
           <div><p id="closeX" onclick="closer()"><strong>X</strong></p>
               <div><img src="../images/pcTuneUp.jpg" align="left"></div><br />
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu nibh eu ipsum ultricies consectetur. Vivamus nunc mi, rhoncus vitae velit sed, ornare dapibus tellus. Ut posuere<a href="#">Read More</a>  </p>
           </div>
       </div>

CSS Below...

  section#right div#popArt div p#closeX{
     padding: 2px;
     float: right;
     border: 2px solid black;
     border-radius: 100px;
     color: black;
  }

  section#right div#popArt{
     position: fixed;
     right: 3px;
     top: 320px;

     width: 310px;
     height: 145px;
     border: 2px solid rgb(229, 238, 222);
     background-color: rgb(221, 230, 222);

     visibility: hidden;  //don't worry about the visibility as hidden that is for another javascript event.  switch to visible or delete when testing.

Like I said it works like it should as is, but I don't want a cursor.

Thanks, I figured it was something simple. I actually never been taught about cursor: or don't remember seeing it. I will remember that in the future. Deep down I figured I didn't have to change any code (jquery), but didn't know. — dragonore, Mar 01 '14 at 16:59
possible duplicate of [How can I make the cursor a hand when a user hovers over a list item?](http://stackoverflow.com/questions/3087975/how-can-i-make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item) — Justin, Mar 01 '14 at 17:01
I didn't know about cursor, sorry if it was or potentially a duplicate question Justin. If I known about cursor there would not of been a question and therefor no duplicate. So penalize me if you must, but seriously I didn't know. Thanks. — dragonore, Mar 01 '14 at 17:03

score 1 · Answer 1 · answered Mar 01 '14 at 16:57

1

In your css file, add cursor:pointer to section#right div#popArt div p#closeX. This way, your cursor will change for a hand while hovering you "X".

answered Mar 01 '14 at 16:57

service-paradis

3,333
4
34
43

score 1 · Answer 2 · answered Mar 01 '14 at 16:58

1

Set the cursor with CSS:

#closeX {
    cursor: pointer;
}

OR, use the <a> tag but return false so the href isn't loaded:

$("#closeX").click(function(){
    $("#closeX").hide();
    $("#popArt").hide();
    return false;
});

answered Mar 01 '14 at 16:58

Justin

26,443
16
111
128

How do I make my "X" look like a hand or arrow hovering over it while closing out my Div in jQuery?

2 Answers2