How to prevent bootstrap from making font bold?
Question
Without including the bootstrap link in this simple example, the following code performs as expected: Hovering over any word turns the word red, and hovering away returns it to black.
With the bootstrap link included, the change from red/black still works fine, but for some reason, the font becomes bold and stays that way.
Is there a way to prevent bootstrap from leaving the font bold when hovering away?
Demonstrates bold turning on after hovering away: http://jsfiddle.net/vLtsw4vb/
Commenting out or removing the bootstrap link results in the desired behavior.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready (function () {
$('.ztag')
.hover (
function () {
$(this).css({color: '#ff0000'})
},
function () {
$(this).css({color: '#000000'})
}
)
})
</script>
</head>
<body>
<span class='ztag'>foo</span>
<span class='ztag'>bar</span>
<span class='ztag'>stuff</span>
</body>
</html>
2 answers
solution1
1 ACCPTED 2015-06-23 01:16:24
The original black color which bootstrap was using was #333 . You change it to #000 which makes it appear bolder.
Try this
$(document).ready (function () {
$('.ztag')
.hover (
function () {
$(this).css({color: '#ff0000'})
},
function () {
$(this).css({color: '#333333'})
}
)
})
solution2
0 2015-06-23 01:34:24
添加font-weight值，请参阅： http : //jsfiddle.net/vLtsw4vb/2/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.