我在html中有一个表格，将鼠标悬停在它上面时会显示文本。显示的文本没有设计，如何应用一些CSS？
<center>
<div id="container">
<table class="map">
<?php
for ($i=1; $i < 101; $i++) {
echo "</tr>";
for ($j=1; $j < 100 ; $j++) {
$prueba = $i .":".$j;
if ($prueba == '50:50') {
echo "<td onmouseover='' style='cursor: pointer; background-color:#FF0000' title='title css' id=$prueba></td>";
}else{
echo "<td id=$prueba></td>";
}
}
}
?>
</table>
</div>
</center>
<script>
$(document).ready(function(){
$('tr').mouseover(function(){
var valueOfTd = $(this).find('td:first-child').text();
alert(valueOfTd);
});
});
</script>
我想将字母放大，加粗等。
谢谢！！！
嗨安多尼，
不幸的是，很难在浏览器上触发触发工具提示文本的属性（title属性），我什至不敢相信无法设置其样式，因为它的显示方式因浏览器而异，因此，它很难显示漂亮的样式，但是，您可以使用诸如data- *之类的伪代码来基于此创建自己的样式。您将不得不使用您的php变量或令牌来提供此伪属性，但是在这里，我将发布一个示例，说明如何使用这些伪自定义属性来实现此目的。我当然希望这对您的情况有所帮助，朋友！
[data-title]:hover:after {
opacity: 1;
transition: all 0.1s ease 0.7s;
visibility: visible;
}
[data-title]:after {
content: attr(data-title);
background-color: #1C2833;
color: #F4D03F;
font-size: 110%;
position: absolute;
padding: 5px;
bottom: -1.6em;
left: 95%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
border-radius: 10%;
z-index: 99999;
visibility: hidden;
}
[data-title] {
position: relative;
}
.custom-td {
cursor: pointer;
background-color:#FF0000;
padding: 7px;
color:#FBFCFC;
width:60%;
text-align:center;
font-family:'verdana'
}<center>
<div id="container">
<table class="map">
<tr>
<td class="custom-td" data-title="title css">Testing this script on stack<b>overFlow</b>
</td>
</tr>
</table>
</div>
</center>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句