如何使我的"X“看起来像一个手或箭头悬停在它上面，同时在jQuery中关闭我的Div？

Question

好了，我知道如何使用"p“标记来结束div，这在jQuery中很好用。代码如下所示。然而，我不希望客户端有一个光标出现在"X“上，我希望"X”是一个悬停在它上面的箭头，或者是一个带有"a“标签的手。然而，当我使用"a“标签时，它会重新加载页面，这就违背了我想要做的事情。从逻辑上讲，我认为我需要使用preventDefault()语法，但我试过了，但可能我没有做对，因为我是一个新手。任何帮助都会得到重视。

下面的Jquery ...

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

下面的HTML ...

       <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 ...

  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.

就像我说的，它的工作方式应该是这样的，但我不想要光标。

Answer 1

在css文件中，将cursor:pointer添加到section#right div#popArt div p#closeX。这样，当你悬停在"X“上时，你的光标会变成一只手。

Answer 2

使用CSS设置光标：

#closeX {
    cursor: pointer;
}

或者，使用不带return false的<a>标记，这样就不会加载href：

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