[英]Make Div Clickable without Javascript or <a> or href
I'm having a small issue with a div . 我的div有一个小问题。
I have a font awesome icon in my div that i want to be clickable without using the a or href tag . 我的div中有一个很棒的字体图标,我希望不使用a或href标签就可以单击它。
Javascript - i would prefer not unless its the only option Javascript-我宁愿不这样做,除非它是唯一的选择
<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 . 我想使div类:panel-x clickable。
Now , when i hover on it , the cursor just changes to the I symbol instead of the hand . 现在,当我将鼠标悬停在它上面时,光标将变为I符号,而不是指针。
The icon for the div is generated in css. div的图标在css中生成。
.panel-x:after {
font-family: 'FontAwesome';
content: "\f057";
}
Try using cursor: pointer
: 尝试使用
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>
您是否尝试过cursor: pointer
?
Using jquery you can do like this 使用jQuery,您可以这样做
$(".panel-x").on('click',function(e){
// code logic here
e.preventDefault();
});
Try this .panel-x{ font-family: 'FontAwesome'; 试试这个.panel-x {font-family:'FontAwesome'; content: "\\f057";
内容:“ \\ f057”; cursor: pointer;
光标:指针; }
}
try this one 试试这个
CSS : CSS:
.panel-x:after {
font-family: 'FontAwesome';
content: "\f057";
}
div.panel-x { cursor: pointer; cursor: hand; }
JS : JS:
$(document).ready(function(){
$("div.panel-x").on('click',function(){
console.log("clicked");
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.