几个月前，我发布了一个关于如何在将鼠标悬停在图片上时显示标题的问题。
这是主题:
Don't understand how to show the caption when hovering image
问题是当我使用 TinyMce 编辑标题时，它不会显示标题悬停。相反，它不显示任何标题，只是悬停。
这是编辑器端(我缩短了它):
<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
// General options
mode: "textareas",
elements : "ajaxfilemanager",
theme : "advanced",
});
//]]</script>
这是输出:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<style>
#caption { display: none;font:12px Times New Roman;}
img:hover + #caption { position: absolute; display: block;}
.caption { display:none; text-decoration: none; font:12px Times New Roman;}
.image-with-caption:hover .caption {display: block; text-decoration: none;}
a:hover { text-decoration: none; }
</style>
<table width="100%">
<tr>
<td>
<?php echo(stripslashes($_POST['content'])); ?>
</td>
</tr>
</table>
</body>
</html>
这是我将代码复制并粘贴到 TinyMCE 中的输入:
<table width="100%">
<tr>
<td>
<div class="image-with-caption">
<a href="images/artistc.php">
<img src="images/imagec08.jpg" style="width:209px" />
<p id="caption">Caption 3</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artistb.php">
<img src="images/imageb12.jpg" style="width:195px" />
<p id="caption">Caption 5</p>
</a>
</div>
</td>
<td>
<div class="image-with-caption">
<a href="images/artista.php">
<img src="images/imagea02.jpg" style="width:260px" />
<p id="caption">Caption 4</p>
</a>
</div>
</td>
</tr>
</table>
如有任何建议和建议，我们将不胜感激。我只想知道为什么它不显示标题。
最佳答案
我不完全理解你的问题，但我看到你有几个具有相同 ID 的标签。那是不允许的。也许如果你解决了这个问题，它有助于解决问题。您应该将 id="caption" 替换为 class="caption"(或其他任何内容)，然后修改您的 css 替换 #caption 通过 .caption
关于php - 我的 CSS 代码在 TinyMCE 中没有正确读取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12117878/