Learn how to modify the text formatting on hover in different sections of your website through various links in HTML

Hello everyone! I am just starting out with html, so please forgive any mistakes in my syntax.

I have some simple html code and I am trying to achieve a hover effect. When I hover over the number 1, I want the text "This is the first match" to change color further down in the document. To accomplish this, I have written the following CSS:

#number1:hover ~ #match1{ 
    color: yellow; 
}
#number2:hover ~ #match2{ 
    color: yellow; 
}
Please hover over this number to see the respective match

<a id="number1">1</a>
<br>
Or hover over this number to see the respective match
<a id="number2">2</a>
<br>
<a id="match1">This is the first match</a>
<br>
<a id="match2">This is the second match</a>

However, I have multiple connections where I would like to apply this same pattern, not just these two examples. Is there an easy way to implement this globally throughout the document? I'm not sure if using '<a>' is the correct approach. I thought about possibly using 'href', but I'm uncertain.

Thank you for your help in advance!

htmlcsshovermouseover

Answer №1

If you're looking to solve this issue using Javascript, one way is to utilize the onmouseover (hover) event. However, in order to apply the same attribute to multiple desired tags, it's important to assign them all a shared class name.

<body>
    <a class = "colorchange" id="match1">This is the first match</a>
    <br>
    <a class = "colorchange" id="match2">This is the second match</a>
    <br>
    <a class = "colorchange" id="match3">This is the third match</a>
    <br>
    <a class = "colorchange" id="match4"&g

    <script>
        elements = document.getElementsByClassName("colorchange");
        for(var i = 0, length = elements.length; i < length; i++) {
            colorChange(elements[i])
        }
        function colorChange(btn){
            btn.onmouseover = function(){
                btn.style.color = "yellow"
            }
        }
    </script>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...

javascripthtmlcss

I cannot seem to receive the confirmation of success!

Trying to store user details in a database and display a success message that fades in. I have attempted some code, but unfortunately it's not working. Please help me out. Apologies if I am mistaken. Here is my register.php code: <?php require ...

phpjqueryhtmljsonajax

Disable page scrolling while enabling scrolling for specific elements with overflow using JQM

Is there a way to stop the page from scrolling on a jQuery Mobile page while still allowing a specific element with overflow set to scroll to be scrolled by the user? The challenge is that the length of the page may vary slightly, exceeding 100% on differe ...

javascriptjqueryhtmlcssjquery-mobile

Preventing automatic form redirection with AJAX failure

I'm attempting to prevent my form from redirecting when the user enters their email and clicks the OK button. The AJAX code seems to be functioning properly as the error message is displayed, but the problem is that it triggers an error every time an ...

jqueryhtmlajaxformshttp-redirect

Having trouble with CSS messing up your gridview button display?

Oddly enough, whenever I place buttons inside a gridview, they end up looking very small (as shown in the image below), even though the gridview itself has no CSS applied to it. Is it possible that some other CSS is affecting the buttons? I have too much ...

asp.netcss

An issue has arisen when trying to utilize the HTML input type="file" in ASPX

I need help troubleshooting an issue with my form that includes the "Upload" control using HTML input type="file" Below is the snippet of my HTML code: <form id="form1" runat="server" enctype="multipart/form-data"> <div class="form-group"> ...

c#asp.nethtml

Tips for showcasing five inputs in a single row on a webpage using a customized width in Bootstrap

I am struggling to align 5 inputs in a single row on a page with custom widths. For example, I want the amount input to be smaller than the offer input. I attempted to use columns and apply different classes for size, but the submit button ended up not bei ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

"Efficiently handle online submissions: Use Django to submit a form and instantly display the outcome

I have an urgent task to develop a web page where users can input data, and the backend will perform calculations and display the result below the input field on the same page (similar to checking online air ticket prices). I am new to Django and HTML. Be ...

htmljquerydjangoajaxforms

Make dark mode the default setting in your Next JS application

In my Next JS application, I have implemented both isDarkMode and handleDarkMode functions. Within the Header component, there is a toggle button that allows users to switch between light and dark modes. <ThemeContainer> <label classN ...

htmlcssnode.jsreactjsnext.js

Is there a way to refresh a specific element without having to reload the entire page when the button is clicked

While working on a rock, paper, scissors game in JavaScript, I found it tedious to have to constantly reload the page after each play. To solve this issue, I attempted to add a button that would reset the game for a new round. However, I encountered an err ...

javascripthtml

Enable the choice for Bootstrap collapse animation to be customized

Is there a way to allow users or admins on my website to decide whether or not Bootstrap 4 collapse elements should be animated? The concern is that when many elements are moved by the animation, it becomes less smooth. Therefore, it would be ideal to give ...

javascriptjquerycssbootstrap-4

Can jQuery version 1.3.0 be used to enable $.mobile.pageCreate on Webkit browsers?

After numerous attempts to address this issue, it finally occurred to me that the problem stemmed from using the jQuery 1.3.0 library. My goal is to create a dialog on a webpage without requiring user interaction using jQuery mobile. Surprisingly, it work ...

jqueryhtmljquery-mobile

I am puzzled as to why my jQuery height and width functions are returning NaN as the result

I am attempting to calculate the ratio of height and width for each image on a webpage. Unfortunately, I am consistently receiving a NaN result and I cannot figure out why. I have been using get() and find() <div class='image-wrapper'> ...

jqueryhtml

Issue with Ionic Grid: Row not occupying entire width of the container

Currently, I am working on creating a straightforward grid consisting of one row and seven columns. Each column holds a div with a single letter of text inside. My intention is for these columns to evenly space out across the page by default, but unfortu ...

htmlcssionic-framework

Tips for Modifying the Width of a Scrollbar

Is it possible to temporarily adjust the scrollbar width in Firefox or Internet Explorer while testing some layout code? I vaguely recall reading about this being tied to resolution, but I can't quite remember. I attempted changing the computer' ...

javascriptjquerycssfirefoxscrollbar

Having difficulty showcasing the JSON data within the dropdown list within an HTML table

In my HTML table, I have 4 rows with Order ID and Product Comments columns disabled. Users can enter data in other columns and submit it. Upon submission, I receive a JSON object which I iterate through and display in the table. I am facing two challenges ...

javascriptjqueryhtmljsonhtml-select

The inclusion of HTTP header information within a jQuery file led to the unsuccessful loading of the jquery.js file

There's a strange issue occurring in my project. To give some context, the project is built using HTML, Extjs, and JSON. When the page loads in the browser, I noticed that header information is being dynamically added to the jQuery file. This unexpect ...

javascriptjqueryhtml

Select the five previous siblings in reverse order using jQuery's slice method

I have a unique approach to displaying a series of divs where only 5 are shown at a time using the slice() method. To navigate through the items, I include an ellipsis (...) link after every 4th item, which allows users to easily move on to the next set of ...

javascriptjqueryhtmlcssangularjs

clear the input field of any entered text type

Just starting out with Javascript! Below is some code: This code is taken directly from the HTML page <form action="#" id="ToolKeywordSearch"> <input type="text" class="ProductFinderText" id="ToolSearchField"onblur="if(this.value==& ...

javascripthtmlcssresponsive-design

Inserting a meta tag containing both the name and content attributes into an HTML page using XSLT

I'm a beginner in XSLT, but I need to use it to insert a meta tag into my existing HTML page. This is how my current HTML page looks: <html class="no-js" lang="de-DE"> <head> <meta content="IE=edge" http-equiv="X-UA-Compatibl ...

htmlxmlxslt