When testing this simple example without the bootstrap link, everything seems to be working correctly: Hovering over any word changes its color to red, and when hovering away it returns to black.
But as soon as the bootstrap link is included, the text becomes bold after hovering away. Is there a way to prevent bootstrap from causing this font-weight change?
You can see the behavior of the bold font changing on hover away in this demonstration here: http://jsfiddle.net/vLtsw4vb/
It has been noted that by commenting out or removing the bootstrap link, the desired behavior is achieved.
<!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>