Is there a way to create a marker that changes color when hovering over the text directly below it?

Hi everyone, I hope you're all doing well. Currently, if you hover over the marker, it changes color. However, I want this effect to apply when hovering over the text below as well. Is there a way to create a connection between these two div elements?

Take a look at the code :

/* Blue mark on the line */

.marker:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}

.marker { 
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #D5DBDB;
   margin-top: 10px;
   z-index: 3;
   transition: width 2s, height 2s, background-color 2s, transform 2s;
}

/* Effect when hovering over the market */

.marker:hover {
   background-color: #424949;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name ="author" content="">
    <link rel="shortcut icon" href="favicon.ico" type="">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482a27273c3b3c3a2938087d66786678652a2d3c2979">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
  </head>
    <body>
    <div class="container">
        <div class="timeline-container">
            <div class="timeline-block timeline-block-right">
                <div class="test3">
                    <div class="marker"></div>
                    <div class="timeline-content">
                        <h3>TEST TEST</h3>
                        <span>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</span>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Best regards

htmlcssbootstrap-4

Answer №1

To easily achieve this effect, you can transfer the :hover styles to the .test3 element with the following selector:

.test3:hover .marker {
   /* Your styles here */
}

When put together:

/* Styles for the marker */

.marker:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}


.marker { 
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #D5DBDB;
   margin-top: 10px;
   z-index: 3;
   transition: width 2s, height 2s, background-color 2s, transform 2s;
}

/* Effect when hovering over the marker */

.test3:hover .marker {
   background-color: #424949;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name ="author" content="Ismaël Zemmouj">
    <link rel="shortcut icon" href="favicon.ico" type="">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="87e5e8e8f3f4f3f5e6f7c7b2a9b7a9b7aae5e2f3e6b6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
  </head>
    <body>
    <div class="container">
        <div class="timeline-container">
            <div class="timeline-block timeline-block-right">
                <div class="test3">
                    <div class="marker"></div>
                    <div class="timeline-content">
                        <h3>TEST TEST</h3>
                        <span>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</span>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Answer №2

To achieve this effect, it is recommended to apply the transition on the timeline-block element since it serves as the parent container for both the marker and timeline-content.

Timeline block CSS: 
.timeline-block:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}

.timeline-block{
transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.marker { 
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #D5DBDB;
   margin-top: 10px;
   z-index: 3;
}

.timeline-block:hover {
   background-color: #424949;
}
HTML setup: 
<!-- HTML Code Goes Here -->

Answer №3

/* Styling the blue marker on the line */

.marker:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}


.marker { 
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #D5DBDB;
   margin-top: 10px;
   z-index: 3;
   transition: width 2s, height 2s, background-color 2s, transform 2s;
}

/* Hover effect on the marker */

.test3:hover .marker {
   background-color: #424949;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name ="author" content="Ismaël Zemmouj">
    <link rel="shortcut icon" href="favicon.ico" type="">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a111811170515255d464846454e431d0a05050151">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
  </head>
    <body>
    <div class="container">
        <div class="timeline-container">
            <div class="timeline-block timeline-block-right">
                <div class="test3">
                    <div class="marker"></div>
                    <div class="timeline-content">
                        <h3>TEST TEST</h3>
                        <span>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</span>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

Answer №4

For those utilizing bootstrap, a simple jquery solution can be implemented using the hover() method combined with adding and removing a class.

If this method doesn't suit your preferences, it might be beneficial to someone else.

$('.timeline-content').hover(enter, leave);

function enter() {
  $('.marker').addClass('hover');
};

function leave() {
  $('.marker').removeClass('hover');
};

CSS styling:

.hover {
   background-color: #424949;
   transition: all 1000ms ease-in-out; 
}


$('.timeline-content').hover(enter, leave);

function enter() {
  $('.marker').addClass('hover');
};

function leave() {
  $('.marker').removeClass('hover');
};
/* Blue point on the line */

.marker { 
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: #D5DBDB;
   margin-top: 10px;
   z-index: 3;
   transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.hover {
   background-color: #424949;
   transition: all 1000ms ease-in-out; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name ="author" content="Ismaël Zemmouj">
    <link rel="shortcut icon" href="favicon.ico" type="">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bddfd2d2c9cec9cfdccdfd88938d938d90dfd8c9dc8c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="test2.css">
  </head>
    <body>
    <div class="container">
        <div class="timeline-container">
            <div class="timeline-block timeline-block-right">
                <div class="test3">
                    <div class="marker"></div>
                    <div class="timeline-content">
                        <h3>TEST TEST</h3>
                        <span>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.</span>
                        <p></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </body>
</html>

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

String casting for large JavaScript integers may require rounding to function properly

When trying to pass a large integer to a function from an onclick event in HTML, I always encounter issues with rounding. Despite using bigInt libraries, I still struggle to pass the full number accurately and would prefer a simple string casting method. ...

javascripthtmlbigint

Floating elements in IE are dropping below a floated input within an unordered list, while in Chrome everything displays correctly

I've been troubleshooting this issue for an hour now with no success. I'm facing a problem in Internet Explorer and can't figure out why. This is a snippet of the HTML code I'm using to display my registration form: <ul id="registe ...

htmlcssinternet-explorercss-float

Enhancing Dropdown Functionality Using Jquery

Hey there, I am looking to create a dropdown list/menu similar to the one shown in this image: (a screenshot). Could you please guide me on how to achieve this? Can it be done using JQUERY? Thank you in advance, Andrea ...

jquerycssinterfacemenudrop-down-menu

Ways to create a line break within an <input> element with type="text"

https://i.stack.imgur.com/fCh87.png Is there a method to transform the Description field so that it displays as two lines instead of just one line? <label>Description</label> <input type="text" name="description" size=&q ...

html

Attempting to locate an element using Selenium IDE proves to be challenging unless each command is executed individually

Currently, I am utilizing selenium ide for automating my tests. Once I click on a link, a popup window appears with a div containing text. Strangely, I am unable to retrieve the text within the div tag without either double-clicking on it or executing the ...

htmlseleniumtestingautomated-testsselenium-ide

Deactivate the button in the final <td> of a table generated using a loop

I have three different components [Button, AppTable, Contact]. The button component is called with a v-for loop to iterate through other items. I am trying to disable the button within the last item when there is only one generated. Below is the code for ...

javascripthtmltypescriptvue.js

Methods for Expanding a Div within an Oversized Row, Despite Height Constraints

I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...

htmlcss

Is there a method to style the parent DIV using CSS when the IDs of the child DIVs are

Similar Question: Looking for a CSS parent selector? If I am unable to modify the HTML file, is it possible to apply CSS styles to the parent DIV using only the ID of the direct child DIV? Here's an example scenario: <div> <div id="c ...

htmlcssdomcss-selectors

Replace text using the str_replace function

I have a total of seven lines of text that I need to manipulate using PHP. My first task is to filter out any lines that do not contain the word 'MARCO1998'. Next, from the remaining lines, I need to extract only the 1-3 numbers that come after ...

phphtml

How can I iterate through JSON data and showcase it on an HTML page?

I am in the process of developing a weather application using The Weather API. So far, I have successfully retrieved the necessary data from the JSON and presented it in HTML format. My next goal is to extract hourly weather information from the JSON and ...

javascripthtmlajax

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

htmlcsstwitter-bootstrap

Transfer information from session to vue-component

Within my routes file, I obtain the current user from the session and then render the profile HTML: app.get('/profile', isLoggedIn, function(req, res) { res.render('profile.html', { user : req.user // extract user ...

htmlnode.jsexpressvue.js

css top navigation does not appear at the top of the webpage

My navigation bar appears to have an unexpected 5px padding issue that is causing it not to align properly at the top. To investigate, I have created a basic header.html + header.css setup as follows: <link href="css/header.css" rel="stylesheet"> &l ...

htmlcss

Dealing with HTML fields that share the same name in various positions can be tricky

Currently, I have developed a non-commercial web application using basic HTML, PHP, and Javascript along with Dynamic Drive's Tab Content code. This app serves as a tool for managing the books in my home library as well as on my ereader. My main goal ...

javascriptphphtmlajax

Is it possible for the `drop-shadow` shadow to be applied only to certain elements?

In the top image below, you can see how the drop-shadow effect would be drawn if applied to the top element. I am exploring the possibility of having the shadow cast only on specific objects, as shown in the bottom image. I am open to unconventional solut ...

cssdropshadowcss-filters

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

javascripthtmlcssradio-button

How to pass the id value between pages in web developmentactics?

I've been struggling to call the id value of one page in another for a while now. I assigned the id value "addedcart" to the form and tried to call it in my PHP code, but no cart value is being displayed. I'm not sure if I am calling the id corre ...

phphtml

CSS: Unexpected value, received NaNrgb

I was attempting to incorporate a checkbox into a Bootstrap form that turns green when it is checked. Here is the code I used: function updateColor() { $("#check1").animate({ "background-color": "rgb(209, 231, 221)" }); } <script src="http ...

javascripthtmljquerycssbootstrap-5

Having difficulty extracting images from a collection - web scraping struggle

I have a basic understanding of web scraping but I am facing an issue. I am using PHP Simple HTML DOM and struggling to extract images from within each 'li' tag. <ul class="slides"> <li> <img src="www.webpage.com/oH7oCOEhQAB ...

phphtmldomweb-scraping

What is the best way to handle an AJAX request within an if-else statement?

Attempting to utilize an if-else condition in order to make a jQuery Ajax call to an API. Having trouble understanding why the ajax function is being called even though it should be in the else statement. Below is the code snippet: if (e.value == null | ...

javascriptjqueryhtmlajax