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