更改鼠标悬停标题上的文本颜色答案

【问题标题】：Change text color on mouseover caption更改鼠标悬停标题上的文本颜色
【发布时间】：2012-10-27 14:54:51
【问题描述】：

我正在尝试设置一个页面，其中连续有多个标题，下面有一个描述性段落。当用户滚动标题时，段落将根据他们悬停的标题而改变。我希望每个标题都是不同的颜色，并且段落的字体颜色应该改变以匹配标题的颜色。我遇到的问题是改变段落的颜色。

这是我的例子：

<script type="text/javascript">
function onover(caption)
{document.getElementById('text').innerHTML=caption;}
{document.getElementById('text2').innerHTML=caption;}
</script>

<a onmouseover="onover('Paragraph 1')" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>

【问题讨论】：

标签： javascript html css

【解决方案1】：

更新由于OP想要替换文本，

<script type="text/javascript">
       function onover(caption,color) {
          document.getElementById('text').innerHTML=caption;
          document.getElementById('text').style.color=color;
          document.getElementById('text2').style.color=color;
   } 
</script>

<a onmouseover="onover('Paragraph 1','green')" style="color:green" id='one'>Title 1</a>
<a onmouseover="onover('Paragraph 2','red')" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>

Demo

Update 2

【讨论】：

@user1778830 很高兴我能提供帮助
既然你帮我这么快，我能要求别的吗？
标题/段落将位于页面底部，而我还有另一个部分，其中图像缩略图将在页面顶部显示标题。现在，我将顶部图片标题发送到“段落”
，有什么想法吗？
@user1778830 那么您面临什么错误？？如果您提供正确的“唯一”ID，它应该可以工作
显然没有看到'caption' div，并且鼠标悬停事件都被发送到'paragraph' div。

【解决方案2】：

<script type="text/javascript">
function onover(caption, objId, obj)
{
   document.getElementById(objId).innerHTML=caption;
   document.getElementById(objId).style.color = obj.style.color;
}
</script>

<a onmouseover="onover('Paragraph 1', 'text', this)" style="color:green">Title 1</a>
<a onmouseover="onover('Paragraph 2', 'text2', this)" style="color:red">Title 2</a>
</br>
<div id="text" style="color:green">Paragraph 1</div>
<div id="text2" style="color:red"></div>

【讨论】：

感谢您的快速回复，但这会在第一段下方创建第二段，我希望第 2 段替换第 1 段。

【解决方案3】：

document.getElementById('text2').style.color = 'blue';

会改变文本的颜色。

在单独的说明中， {document.getElementById('text2').innerHTML=caption;} 不是你的 onover 函数的一部分。

【讨论】：

【解决方案4】：

我强烈建议将风格、逻辑和内容分开。它使您的代码更易于阅读维护。一些建议：

所有内联样式（例如）都应替换为样式表
- 在此示例中，这样做允许您为菜单项和段落重复使用相同的样式
利用第三方 JavaScript 库（如 jQuery）来简化跨浏览器 javascript 实现不一致的处理
以编程方式而不是内联方式附加事件
不要尝试单独处理每个案例；再抽象一点你的代码。无需创建多个 div 来匹配样式
一般来说，最好将所有脚本内容放在页面末尾，就在结束正文标记之前。这将使您的内容在页面处理 javascript 时可见，并使网站看起来加载速度更快

以下是如何实施这些建议的示例：

<style>
  .red { color: red; }
  .green { color: green; }
</style>
<div id="TitleBar">
  <a data-text="Paragraph 1" class="green">Title 1</a>
  <a data-text="Paragraph 2" class="red">Title 2</a>
</div>
<div id="text"></div>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
  $('#TitleBar').on('hover', 'a', function (e) {
    var $evTarg = $(e.target),
        $dest = $('#text');
    $dest.html($evTarg.data('text')).attr('class', $evTarg.attr('class'));
  });
</script>

最后一条评论 - 如果“段落 x”文本超过几个单词，请考虑将文本存储在命名数组中，而不是将其嵌入源标记中。

【讨论】：

感谢您的建议，但我想我应该解释一下，这将是 eBay 的拍卖列表页面。只是我正在使用的小 javascript 是我能逃脱它被接受的全部。

【解决方案5】：

您最好通过 CSS 来实现。完全不需要编程。

【讨论】：