我想在 Bootstrap 中将自定义 CSS 应用于弹出窗口的标题和内容,但是,我的 CSS 似乎被忽略了。
如何将特定的 CSS 分别应用于标题和内容?
$("#poplink").popover({
html: true,
placement: "right",
trigger: "hover",
title: function () {
return $(".pop-title").html();
},
content: function () {
return $(".pop-content").html();
}
});
html, body {
width: 100%;
height: 100%;
}
.pop-div {
font-size: 13px;
margin-top: 100px;
}
.pop-title {
display: none;
color: blue;
font-size: 15px;
}
.pop-content {
display: none;
color: red;
font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pop-div">
<a id="poplink" href="javascript:void(0);">Pop</a>
<div class="pop-title">Title here</div>
<div class="pop-content">Content here</div>
</div>
最佳答案
原因似乎是 javascript 正在创建全新的元素来显示弹出窗口本身。这些新元素与原始元素具有不同的 css 类名称。
尝试将此添加到您的 CSS 中:
.popover-title {
color: blue;
font-size: 15px;
}
.popover-content {
color: red;
font-size: 10px;
}
更新
根据您使用的库版本,名称可能会有所不同。如果上述方法不起作用,请尝试使用 .popover-header
和 .popover-body
代替。
关于html - 在 Bootstrap 中将 CSS 应用于弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17884750/