在鼠标悬停标题上更改文本颜色

Question

I'm trying to set up a page where there will be several titles in a row, with a descriptive paragraph below. When the user scrolls over the titles, the paragraph will change corresponding to the title they are hovering over. I would like each title to be a different color, and the font color of the paragraph should change to match the title's color. The problem I'm having is getting the paragraph's color to change.

Here's my example:

<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>

Answer 1

Updated Since OP wanted to replace the text,

<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

Answer 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>

Answer 3

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

would change the color of text.

on a separate note, {document.getElementById('text2').innerHTML=caption;} is not part of your onover function.

Answer 4

I'd strongly recommend separating style, logic, and content. It makes your code much easier to read maintain. Some recommendations:

• All inline styling (eg ) should be replaced by stylesheets
  • In this example doing so allows you to reuse the same styling for both the menu item and the paragraph
• Make use of a third-party JavaScript library like jQuery to simplify handling cross-browser javascript implementation inconsistencies
• Attach events progmatically rather than inline
• Don't try to handle each case individually; abstract your code a little more. There's no need to create multiple div's just to get the styling to match
• Generally speaking, it is a good idea to place all script content at the end of the page, just before the closing body tag. This will make your content visible while the page is processing the javascript and give the site the appearance of loading faster

Here's an example of how to implement these suggestions:

<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>

​ One last comment - if the "Paragraph x" text is more than a couple of words, consider storing the text in a named array instead of embedding it in the source tag.

Answer 5

You'd better do that via CSS. No programing needed at all.