Steps to display the "col-md-6" div upon hovering over list items in a different div

I have been trying to make a hover action work in my HTML document. I've managed to get it to work only when the description is a child of the li tag, but I want the description to be displayed as a separate div. 


              <div class="row">
              <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s">
                    <h2>Services</h2>
                      <ul class="services-list flex">
<!--Hover this list item for the description div to appear-->
                        <li  id="item-1" class="wow fadeIn" data-wow-delay="1s"><h5><a href="#">Lighting System Design</a></h5>
                          <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign">

                        </li>
                      </ul>
                  </div>
<!--Description div that should appear when hovering over #item-1-->
                  <div class="col-md-6 header-left wow fadeIn" id="description-1">
                    <h4>Lighting System Design</h4>
                    <p>Determining the equipment and programming required to meet interior and exterior lighting specifications.</p>
                  </div>
                </div>
            </div>

jqueryhtmlcsstwitter-bootstrap-4

Answer №1

When the element you wish to show is not directly next to or within the element you want to toggle, CSS won't work, but you can make use of javascript. I adjusted the href attribute of the link to match the id of the element you want to toggle. Alternatively, you could use a data-* attribute if you prefer not to change the href value or modify it to something else.

$('.services-list a').hover(function() {
  $($(this).attr('href')).stop().fadeToggle();
})
.description {
  display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s">
    <h2>Services</h2>
    <ul class="services-list flex">
      <li id="item-1" class="wow fadeIn" data-wow-delay="1s">
        <h5><a href="#description-1">Lighting System Design</a></h5>
        <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign">

      </li>
    </ul>
    </div>
    <!--Description div i want to appear when hover on #item-1-->
    <div class="description col-md-6 header-left wow fadeIn" id="description-1">
      <h4>Lighting System Design</h4>
      <p>Determining the equipment and programing required that meet interior anenter code hered exterior lighting specifications.</p>
    </div>
  </div>
</div>

Answer №2

To achieve this effect, you can utilize jQuery's mouseover and mouseleave functions. See the code snippet below for an example.

$('#item-1').on('mouseover', function() {
  $('#description-1').fadeIn("fast");
}).on('mouseleave', function() {
  $('#description-1').fadeOut("fast");
});
#description-1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-6 wow fadeIn header-left" data-wow-delay=".5s" data-wow-duration="2s">
      <h2>Services</h2>
      <ul class="services-list flex">
        <!--Hover this list item for description div to appear-->
        <li id="item-1" class="wow fadeIn" data-wow-delay="1s">
          <h5><a href="#">Lighting System Design</a></h5>
          <div class="wow fadeIn" data-wow-delay=".1s" id="lightingDesign"></div>
        </li>
      </ul>
    </div>
    <!--Description div i want to appear when hover on #item-1-->
    <div class="col-md-6 header-left wow fadeIn" id="description-1">
      <h4>Lighting System Design</h4>
      <p>Determining the equipment and programing required that meet interior anenter code hered exterior lighting specifications.</p>
    </div>
  </div>
</div>

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 you try to create a popover, a cautionary message pops up indicating that $tooltip is no longer supported. It is

I need help with creating a popover that appears when hovering over an anchor tag. Here is the code I am using: angular: 1.4.2 ui-bootstrap :0.14.2 <div class="row" ng-repeat="endorsement in endorsements| filter: {category:categorySelected}"> &l ...

javascriptcssangularjstwitter-bootstrap

turn the cube shape into one with smooth, rounded corners

Does anyone know how to create a cube with rounded corners using three.js? I've heard it's not possible with CSS. Any guidance on how to achieve this? Check out this link for an example /* |------------------------------------------| | MelonHTM ...

javascriptjquerycss3dthree.js

Automatically updating the JavaScript content on a webpage without having to refresh the entire HTML page, based on the changing

Is there a way to adjust the opacity change rate of my nav bar automatically without the need to refresh the page? The current opacity change rate is based on the width of the window, but once the page is loaded, adjusting the width does not affect the rat ...

javascriptjqueryhtmlcss

Floating Action Button is not properly attached to its parent container

When developing my React Js app, I decided to utilize the impressive libraries of Material UI v4. One particular component I customized is a Floating Action Button (FAB). The FAB component, illustrated as the red box in the image below, needs to remain p ...

javascriptcssreactjsmaterial-ui

The additional values inserted into the form using jQuery are not being recognized or passed to AngularJS

My form has multiple input fields, some of which are pre-populated when the markup is generated. For example, value=#{ session[:lat] } or simply value='111'. While this appears correct when inspecting the page, Angular does not submit this value. ...

jqueryformsangularjs

Using Jquery to display extra information after a user clicks on a form field

Just getting started with Jquery and searching for a solution to display additional text when a user interacts with a form. This is the input field in question: <input class="feed" id="post_title" name="post[title]" size="100" rows="20" type="text clas ...

jqueryfocus

Transfer data between an HTML page and a PHP page hosted on separate locations using jQuery

Below is the code snippet I am currently working on: function send_data() { var a=$("#username").val(); var b=$("#password").val(); $.post("http://localhost/login/login.php", {uname: a, pswd: b}, function(data) { $("#result").html(data); }); ...

javascriptphpjqueryhtmlajax

Iframes are not compatible with JQuery UI dialogs

After attempting to open a URL within an Iframe in a JQuery dialog box, I encountered the following issue: Here is the code snippet that I used: http://pastebin.com/Wqf0mGhZ I am looking for a solution to make sure that the dialog displays all of the con ...

javascriptjqueryhtmliframejquery-ui-dialog

How to align several DIVs within a container with an unspecified size

I have several blue rectangles with known dimensions (180 x 180 px) within a container of unknown size. <html> <head> <style> @import url('http://getbootstrap.com/dist/css/bootstrap.css&a ...

htmlcsstwitter-bootstrapcenter

Implementing a postback without relying on AutoPostBack

My WebForm includes two drop down lists, where the options in the second list are determined by the selection in the first. Thus, when a user changes the category in the first dropdown, the second dropdown should display corresponding subcategories. This ...

c#jqueryasp.netwebformsautopostback

Utilizing Ajax to Dynamically Update Link Styles

When using an AJAX request to load a portion of a webpage, the content is delivered by a framework and then inserted into the DOM tree using jQuery. Everything seems to be working well so far. However, I encountered an issue when trying to use background ...

cssajaxhyperlink

Browsing through dual snap points simultaneously on Google Chrome

I'm currently developing a website that incorporates scroll snapping for 3 viewport-sized <section> elements set up like so: html, body { scroll-behavior: smooth; scroll-snap-type: mandatory; scroll-snap-points-y: repeat(100vh); scrol ...

htmlcssgoogle-chrome

The @media print rule for Angular 16 in the style.css file is not functioning properly

I'm currently working on an Angular component called ViewTask, which has a template that is rendered inside the app component. The app component also consists of a side nav bar. My goal is to only display the content inside the 'print-section&apo ...

htmlcssangularmedia-queries

Utilizing and incorporating distinct html elements on a separate webpage

I am in the process of developing a dynamic newspaper-style website where articles will be regularly updated and replaced on the Home Page. Each article featured on the Home Page will serve as a link to a separate page for full details. These article links ...

html

Problem with stellar.js, boostrapv4, and jQuery 3.2.1 (lack of jQuery migrate support)

Having some issues integrating stellar with Bootstrap v4 and jQuery 3.2.1 as I keep encountering the error message "Uncaught TypeError: elem.getClientRects is not a function" Check out this JSFiddle link $.stellar({ horizontalScrolling: false, vertic ...

jqueryconsole.logstellar.js

Is there a way to verify if all the values in an array of objects are identical?

In this scenario, my array consists of entries with identical address IDs but different phone types and numbers. I am in need of assistance with iterating through the array to extract the phone type and number when the address ID matches. I seem to encount ...

javascriptjquery

Django plugin designed for showing a real-time feed of messages - powered by Dajax or Jquery?

Currently, I am attempting to set up a section in my Django application where updates or messages from the server can be displayed once specific tasks are done. I had initially looked into using a plugin that utilizes Dajax / Jquery for this feature, but ...

javascriptjqueryajaxdjangoconsole

Strategies for positioning identical Highcharts series next to one another

I am currently utilizing highcharts to create column charts. My column chart consists of multiple series, structured like this: Here is the code I am working with: $(function () { var chart; $(document).ready(function() { ...

phpjavascriptjqueryhighcharts

Efficient PHP caching solution for optimizing JavaScript and CSS performance

I'm facing a unique challenge that I can't seem to solve through typical Google searches. I'm in the process of consolidating all my javascript and css into separate php files using require_once() to pull in the content. The structure of my ...

phpjavascriptcsscaching

Discovering the most recent messages with AJAX

I'm feeling a bit lost on this topic. I'm looking to display the most recent messages stored in the database. (If the messages are not yet visible to the user) Is there a way to achieve this without constantly sending requests to the server? (I ...

javascriptphpjqueryajaxchat