鼠标悬停在文章中的段落更改上答案

【问题标题】：One mouse over Paragraph change in Article鼠标悬停在文章中的段落更改上
【发布时间】：2012-05-17 21:22:51
【问题描述】：

我想在我的基于 Jommla 的应用程序中添加一个功能，即当用户将鼠标移到文章中的特定段落上时，文本的颜色应该会发生变化。使段落在屏幕上看起来更加突出。

我希望这个东西是动态的。只是想知道哪个是最好的地方。在 Joomla 中，文章解析发生在哪里？如果我很幸运，是否有任何插件可以帮助实现这一目标？请告诉我

【问题讨论】：

【解决方案1】：

您可以对 Trev 的解决方案稍作修改并使其工作，而无需更改任何文章。

.contentpaneopen p:hover {color:#ff0000;}

默认情况下，Joomla 将 contentpaneopen 类分配给文章，这将对作为该类子级的所有 P 标签产生影响。

【讨论】：

【解决方案2】：

到目前为止，最简单的做法是在文章中为相关段落添加样式，然后在 css 中添加适当的悬停规则，例如

<p class="highlight>some text in here</p>

和

p.highlight:hover
{
    color: #ff0000;
}

刚刚在这里尝试过，它在最后一段对我有用：

http://thelunarscape.com/blog/an-increasingly-active-sun

在这种情况下比使用插件更好的解决方案，除非你想要更花哨的东西，我猜因为每次加载文章时都会运行内容插件，无论是否需要。

【讨论】：

一些旧版本的 IE（肯定是 6，不确定是 7 还是 8）不支持 :hover 用于除 'a' 标记之外的任何内容，因此如果您打算支持，则需要使用 javascript他们。但实际上，除非出于某种原因绝对必须这样做，否则不要费心支持他们。
这对我来说可能不是正确的选择，因为我在网站上有太多的文章..并且进入文章级别并进行这些更改将非常难以维护。我需要一些更有活力和开箱即用的东西

【解决方案3】：

另一个更高级的方法是借助 MooTools。

在您的应用程序中包含 MooTools：

jimport( 'joomla.html.html.behavior' );
JHtml::_('behavior.framework'); //MooTools core
JHtml::_('behavior.framework', true); //This is for MooTools more libraries

接下来创建一个脚本，更改 id 为“myid”的段落的 css：

    $js = <<<EOD
    window.addEvent('domready', function(){
    $('myid').setStyle( 'border', '1px solid #000000')
    });
    EOD;
$document =& JFactory::getDocument();
$document->addScriptDeclaration($js);

为什么要使用 MooTools？ MooTools 可以调整突出显示，甚至为突出显示设置动画。它还应该对旧版浏览器有更好的支持。

【讨论】：

请注意，如果您不想更改应用程序/组件的来源，这也适用于模板覆盖。