Question

I'm having a small issue with a div .

I have a font awesome icon in my div that i want to be clickable without using the a or href tag .

Javascript - i would prefer not unless its the only option

<h3 class="panel-title">

<div class="panel-x" data-toggle="collapse" data-target="#collapseUser">

Title

</div> 

</h3>

I want to make the div class : panel-x clickable .

Now , when i hover on it , the cursor just changes to the I symbol instead of the hand .

The icon for the div is generated in css.

.panel-x:after {
    font-family: 'FontAwesome';
    content: "\f057";
}

Answer 1

尝试使用cursor: pointer：

.panel-x {
  cursor: pointer; /* hand cursor */
  border: 1px solid grey;
  background: ghostwhite;
  display: inline-block;
  padding: 4px 11px;
  border-radius: 4px;
  box-shadow: 0px 1px 1px;
  font-family: 'Trebuchet MS';
}
.panel-x:hover {
  box-shadow: 0px 1px 3px;
}
.panel-x:active {
  box-shadow: 0px 1px 3px inset;
}

<div class="panel-x" data-toggle="collapse" data-target="#collapseUser">Title</div>

<div class="panel-x" data-toggle="collapse" data-target="#collapseUser">There goes a long text</div>

Answer 2

你试过cursor: pointer吗？

Answer 3

使用jquery你可以这样做

$(".panel-x").on('click',function(e){
  // code logic here
  e.preventDefault();    
});

Answer 4

试试这个 .panel-X { font-family：＆＃39; FontAwesome＆＃39 ;; 内容：＆＃34; \ f057＆＃34 ;; 游标：指针; }

Answer 5

尝试这个

CSS：

.panel-x:after {
    font-family: 'FontAwesome';
    content: "\f057";
}


div.panel-x { cursor: pointer; cursor: hand; }

JS：

$(document).ready(function(){
    $("div.panel-x").on('click',function(){

        console.log("clicked");
    })
})

不使用Javascript或<a> or href

5 个答案: