使Div可单击而不使用Javascript <a>或href</a>

Question

我的div有一个小问题。

我的div中有一个很棒的字体图标，我希望不使用a或href标签就可以单击它。

Javascript-我宁愿不这样做，除非它是唯一的选择

<h3 class="panel-title">

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

Title

</div> 

</h3>

我想使div类：panel-x clickable。

现在，当我将鼠标悬停在它上面时，光标将变为I符号，而不是指针。

div的图标在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：'FontAwesome'; 内容：“ \\ f057”; 光标：指针； }

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");
    })
})