Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item.

Scenario:

1: Hover over Element one

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
___________

2: Hover over Element two

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
__________________________

3: Hover over Element three

ELEMENT ONE    ELEMENT TWO   ELEMENT THREE
__________________________________________

Although I have made some progress, I am facing challenges in getting the elements to expand properly based on the width of the entire list.

       
        // JavaScript code for the carousel functionality

       

#magic-line {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100px;
  height: 2px;
  background: #fe4902;  
}
// Additional CSS styles for the carousel display

.slick-slider {
  position: relative;
  overflow: hidden;
}
.carousel{
  // Additional CSS styles for the carousel container
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<div class="carousel">
  <div class="carousel-image">
    <div class="container-big">
      <ul>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+1&w=400&h=300" />
        </li>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+2&w=400&h=300" />
        </li>
        <li>
          <img src="https://placeholdit.imgix.net/~text?txtsize=101&txt=Example+3&w=400&h=300" />
        </li>
      </ul>
    </div>
  </div>

  <div class="carousel-info">
    <div class="container">
      <ul>
        <li class="slick-current">
          <div class="c-header">About Us</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </li>
        <li>
          <div class="c-header">Others</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </li>
        <li>
          <div class="c-header">Main</div>
          <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </li>
      </ul>
    </div>
  </div>

</div>

javascriptjqueryhtmlcss

Answer №1

To adjust the magicline, focus on recalculating its width rather than its left position - which should always equal 0;

$magicLine.stop().animate({
        left: 0,
        width: leftPos+newWidth
});

Check out the demo here!

Answer №2

One method to achieve this effect is by utilizing CSS along with some JavaScript :

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
</head>

<body>
  <div class="carousel">
    <div class="carousel-info">
      <div class="container">
        <div style="display:inline-block; position:relative;">
          <ul>
            <li class="slick-current" onmouseover="$('#line').css('width','34%');">
              <div class="c-header">About Us</div>
              <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
            </li>
            <li onmouseover="$('#line').css('width','68%');">
              <div class="c-header">Others</div>
              <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
            </li>
            <li onmouseover="$('#line').css('width','100%');">
              <div class="c-header">Main</div>
              <div class="c-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut tristique lorem, et volutpat elit. Morbi leo ipsum, fermentum ut volutpat ac, pharetra eget mauris.</div>
            </li>
          </ul>
          <div id="line" style="position:absolute; bottom:0; left:0; width:34%; height:2px; background:red; transition:all 0.2s;"></div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

A creative approach was taken by incorporating an absolute div with transition effects, which dynamically increases in width upon hovering over each element - resulting in a visually appealing design!

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

When using `npm publish`, any files located within the `node_modules

After developing an npm package, I included some modules in the node_modules directory to make them accessible as "modules". For instance, I have a module called my-module.js in node_modules which I require in my code using require('my-module'). ...

javascriptnode.jsnpmpackage

Drop the <span> element into a paragraph by utilizing JQuery's drag and drop feature

Trying to drag and drop <span> into <p>. The code is functional, but encountering 3 issues: When editing content inside <p> by typing (e.g. three words) and then dragging <span> into <p>, the newly typed words are consider ...

javascriptjqueryjquery-uijquery-ui-draggable

Mastering the usage of AngularJS Directive controllerAs syntax with scope is key to developing

I have included my code below: // HTML <body> <h1>{{foo.name}}</h1> <my-directive></my-directive> </body> // Scripts app.directive('myDirective', function() { return { restrict: 'E', ...

javascriptangularjsangularjs-directive

RouterContext Error: Invariant violation: Do not utilize <withRouter(App) /> in a context without a <Router> present

After wrapping my app with BrowserRouter and trying to export it as withRouter(App), I encountered the following error in the browser: 16 | return ( 17 | <RouterContext.Consumer> 18 | {context => { > 19 | invariant( | ^ ...

javascriptreactjs

Storing property data outside of the render method in ReactJS is key for efficient

I have encountered an issue while attempting to map data outside of the render method in my function and return it within the render. The mapping error is causing confusion as I am uncertain about its underlying cause. Below is the function responsible fo ...

javascriptjsonreactjsecmascript-6redux

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

Stop HTML <dialog> from automatically closing using Vue

I'm working on a project where I need to use Vue to programmatically prevent an HTML dialog element from closing when the close event is triggered. Here's the code snippet I am currently using: import {ref} from 'vue'; const dialogTe ...

javascripthtmlvue.jsvuejs3modal-dialog

How can I retrieve the chosen value from an AJAX combobox using JavaScript in an ASP.NET C# application?

How can I retrieve the selected value from an AJAX combobox item using JavaScript in ASP.NET C#? Below is the code snippet: <asp:ComboBox ID="dropdown_dest" runat="server" Width="90%" onfocusout="blurFunction()" AutoCompleteMode="SuggestAppend" CssCla ...

javascriptc#jqueryasp.netajax

Utilize jQuery to transform array values into date objects

I am receiving an array from a .net controller. The values I am getting for dates are: /Date(1445256000000)/ and /Date(1445256900000)/ Instead of this, I need to convert these into proper date values. Now that I have an array of objects, I want to upda ...

javascriptjqueryarraysjson

How can React and react-router be used to direct users to a specific group of URLs

One scenario I have is when my users upload a group of photos, they need to add specific meta information for each one. After uploading the files, I want to direct them to the first photo's meta editor page. Then, when they click on the "next" button, ...

javascriptreactjsreduxreact-router

Using MongoDB map-reduce with Node.js: Incorporating intricate modules (along with their dependencies) into scopeObj

I am currently immersed in developing a complex map-reduce process for a mongodb database. To make the code more manageable, I have organized some intricate sections into modules that are then integrated into my map/reduce/finalize functions through my sco ...

javascriptnode.jsmongodbnpmmapreduce

Transform the text area in preparation for a GET request

Trying to figure out how to pass the text from a textarea into the source attribute of an image tag while retaining all formatting, including line breaks. After some research, it seems that the best way to accomplish this is by base 64 encoding the text a ...

javascriptajax

Utilizing ng-repeat to display a collection of Angular Highcharts charts

As I work on developing a KPI app using Angular JS, my goal is to establish a collection of charts. Each item in the list will display distinct values and feature a different chart type based on my Model. I am relying on the highcharts-ng directive for th ...

javascriptangularjshighcharts

Implementing AJAX to dynamically insert content into div elements on the page

Currently facing a small issue with my AJAX implementation for creating comments on posts. The functionality is working well, but the problem arises when executing it in the index.html.erb view. The create.js.erb file locates the initial div labeled "comme ...

javascriptruby-on-railsrubyajaxrjs

Waiting for the result of an AngularJS promise

When I click a button in my AngularJS app, the following code is executed: if (!$scope.isChecked) { $scope.getExistingName($scope.userName).then(function (data) { $scope.userName = data; }); } // Additional processing code foll ...

javascriptangularjs

Submitting various ajax data from dynamically created fields

Is there a way to send multiple data from dynamically generated fields in ajax? I am facing an issue with using a for loop since I can't foresee the number of fields in advance. $.ajax({ type: 'GET', data:{ ...

jqueryajaxloopsgrails

Interacting with a third-party application via OAuth using Node server to send REST requests

https://i.stack.imgur.com/Znrp0.png I've been working on a server to manage chat messages and need to integrate with a JIRA instance. I'm currently using the passport-atlassian-oauth strategy for authentication and BearerStrategy for requests. H ...

javascriptnode.jsexpressoauth

Are there any improved methods for optimizing the CSS in my Next.js project?

Currently, I'm immersed in a project using Next.js and styling it with CSS in JS (ReactJSS). Upon inspecting the page source, I noticed that there are over 4000 lines of CSS for a single page, which is not ideal for performance. To provide context, l ...

cssperformanceoptimizationnext.jscss-in-js

The index.html file is not displaying correctly on a servlet 3.0 configuration with Tomcat

I am currently working on a basic web application using Servlet 3.0 with Tomcat 7.0.25, and deploying the application as a war file named mywebapp.war. The structure of the war file is as follows: mywebapp/index.html mywebapp/META-INF/MANIFEST.MF myweba ...

javahtmltomcatservlet-3.0

Is there a way to showcase the generated results on a graph after the user presses the submit button?

I've been working with to generate a bar chart. Currently, when the user clicks 'submit', the input numbers are shown in a graph on http://jsfiddle.net/jx9sJ/5/. Now, I want to make some changes. I am attempting to send the input numbers t ...

javascriptphpajax