Alter the color of text when hovering over the caption with a mouse

Question

Alter the color of text when hovering over the caption with a mouse

I'm currently working on a layout for a page that features multiple titles in a row, each accompanied by a descriptive paragraph below. My goal is to have the paragraphs dynamically change based on which title the user hovers over. Additionally, I want each title to be displayed in a unique color, and for the font color of the paragraph text to match the corresponding title's color. However, I'm encountering difficulty in getting the paragraph text color to update accordingly.

Below is an illustrative 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>

javascript html css

Answer 1

Answer №1

After the original poster expressed a desire to update the text,

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

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

See the demonstration here

Update 2

Answer 2

After the original poster expressed a desire to update the text,

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

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

See the demonstration here

Update 2

Answer 3

Answer №2

<script type="text/javascript">
function showText(description, textId, element)
{
   document.getElementById(textId).innerHTML=description;
   document.getElementById(textId).style.color = element.style.color;
}
</script>

<a onmouseover="showText('Description 1', 'content', this)" style="color:blue">Heading 1</a>
<a onmouseover="showText('Description 2', 'content2', this)" style="color:orange">Heading 2</a>
</br>
<div id="content" style="color:blue">Description 1</div>
<div id="content2" style="color:orange"></div>

Answer 4

<script type="text/javascript">
function showText(description, textId, element)
{
   document.getElementById(textId).innerHTML=description;
   document.getElementById(textId).style.color = element.style.color;
}
</script>

<a onmouseover="showText('Description 1', 'content', this)" style="color:blue">Heading 1</a>
<a onmouseover="showText('Description 2', 'content2', this)" style="color:orange">Heading 2</a>
</br>
<div id="content" style="color:blue">Description 1</div>
<div id="content2" style="color:orange"></div>

Answer 5

Answer №3

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

can alter the font color.

Moreover,

{document.getElementById('text2').innerHTML=newCaption;}

is not included in your onmouseover function.

Answer 6

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

can alter the font color.

Moreover,

{document.getElementById('text2').innerHTML=newCaption;}

is not included in your onmouseover function.

Answer 7

Answer №4

It is highly recommended to divide style, logic, and content in your code as it significantly enhances readability and maintainability. Here are some suggestions:

Avoid inline styling by utilizing stylesheets instead
- By doing so, you can apply the same styling to multiple elements like menu items and paragraphs
Consider integrating a third-party JavaScript library such as jQuery to streamline handling cross-browser Javascript implementation discrepancies
Programmatically attach events rather than using inline event handlers
Try not to address individual cases separately; abstract your code for better organization. It's unnecessary to create multiple divs solely for matching styles
In general, place all script content at the end of the page before the closing body tag. This ensures that your content remains visible while the page processes the scripts, giving the impression of faster loading speed

To implement these recommendations, here's an example:

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

Lastly, if the text "Paragraph x" contains more than a few words, consider storing it in a named array rather than embedding it directly in the source tag.

Answer 8

It is highly recommended to divide style, logic, and content in your code as it significantly enhances readability and maintainability. Here are some suggestions:

Avoid inline styling by utilizing stylesheets instead
- By doing so, you can apply the same styling to multiple elements like menu items and paragraphs
Consider integrating a third-party JavaScript library such as jQuery to streamline handling cross-browser Javascript implementation discrepancies
Programmatically attach events rather than using inline event handlers
Try not to address individual cases separately; abstract your code for better organization. It's unnecessary to create multiple divs solely for matching styles
In general, place all script content at the end of the page before the closing body tag. This ensures that your content remains visible while the page processes the scripts, giving the impression of faster loading speed

To implement these recommendations, here's an example:

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

Lastly, if the text "Paragraph x" contains more than a few words, consider storing it in a named array rather than embedding it directly in the source tag.

Answer 9

Answer №5

The best approach is to handle that using CSS. No coding required whatsoever.

Answer 10

The best approach is to handle that using CSS. No coding required whatsoever.

Alter the color of text when hovering over the caption with a mouse

Answer №1

Update 2

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can we make the lines in the Highcharts force plot take up all the available width

I'm curious, what height would be most suitable for a first impression?

The request from localhost:3000 to localhost:3003 could not be proxied by ReactJS

Using window.open in Google Chrome results in multiple tabs being opened instead of just one

Placement of "like" and "reblog" options within tumblr

Transfer a variable from javascript/jquery to a PHP script within the same page

Every time I execute my code, my website undergoes a refreshing process

dojo combobox with data loaded dynamically from JSON

Using jQuery each with an asynchronous ajax call may lead to the code executing before the ajax call is completed

Identify whether a specific Instagram post is a video by utilizing Python with selenium

Upon pressing enter in the input box, the page will redirect to localhost:3000/

Creating visual representations of data using graphs in PHP or HTML

Tips for retrieving data from a JSON array

triangle as a backdrop

What are the necessary conditions for executing npm start?

When trying to use the `map: texture` with a new `THREE.Texture(canvas)

Filtering an object based on keys within an ng-repeat loop

Sending data to a React Dialog component using the OnClick event

Using jQuery or Javascript to implement a drop-down list filter functionality

What is the best way to trigger two functions with an 'onPress' event in React Native?