Question

我想让我的文字的一部分粗体而且比文本的另一部分更大。但是目前使用jquery我正在使用的文本都是相同的大小，字体粗细和颜色。例如，从我在代码中的第一位开始，我想要出现“硬盘驱动器：辅助存储设备”。我希望硬盘以粗体书写和标题。我希望另一半正常字体重量更小。如何使用我的代码在jquery或css中设置此样式？：）

如果你能提供帮助，我们将非常感激！

这是我的j查询：

$('#harddrive').hover(function() {
$('#info').text('Hard drive: Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#cd').hover(function() {
$('#info').text('CD: External Secondary Storage Device');
}, function() {
$('#info').text('');
});

$('#fan').hover(function() {
$('#info').text('Fan: Used to keep the computer cool');
}, function() {
$('#info').text('');
});

$('#powerblock').hover(function() {
$('#info').text('Power Block: Provides power to the computer');
}, function() {
$('#info').text('');
});

Answer 1

如果要设置文字样式，请使用.html()代替.text()。

以下是一个例子：

$('#harddrive').hover(function() {
$('#info').html('<h3><b>Hard drive:</b></h3> Secondary Storage Device');
}, function() {
$('#info').html('');
});

Answer 2

您需要更改HTML并使用.html()而不是.text()。

例如：

$('#info').html('<h3>Hard drive:</h3> Secondary Storage Device');

Answer 3

你不能，只要你只使用纯文本作为内容。请改用HTML，您可以根据需要设置标题样式：

$('#cd').hover(
  function() {
    $('#info').html('<span class="header">CD:</span> External Secondary Storage Device');
  }, 
  function() {
    $('#info').empty();
  });

.header {
  font-size: larger;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a id="cd" href="#">CD</a>

<div id=info></div>

Answer 4

尝试类似

的内容

$('#info').html('<b>Hard drive</b>: Secondary Storage Device');

Answer 5

您可以使用JQuery的$('#info').css()。使用$('#info').css(propertyName)可以检索CSS属性的值，也可以使用$('#info').css(propertyName, value)进行设置。

如果您希望文字为粗体，请使用$('#info').css('font-weight', 'bold')。

Answer 6

在CSS上创建一个类

.bold{
font-weight:bold;
}

然后仅在您想要的悬停功能

上将类添加到#info

$( "#info" ).addClass( "bold" );

如何在JQuery中设置文本样式？

6 个答案: