logo
down
shadow

flickering when mouse over, .hover() show/hide div(s)


flickering when mouse over, .hover() show/hide div(s)

Content Index :

flickering when mouse over, .hover() show/hide div(s)
Tag : jquery , By : David Marchant
Date : November 25 2020, 01:01 AM


Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Show/Hide Particular Div on hover and Hide a div on mouse out


Tag : jquery , By : apple
Date : March 29 2020, 07:55 AM
like below fixes the issue I made a working fiddle for you: http://jsfiddle.net/NKC2j/1780/
$(".sep-prod").each(function(){
    $(".one,.two,.panel").hide();
        $(this).hover(function(){
            $(this).find(".middle-desc").hide();
            $(this).find(".one").show();
        },function(){
            $(this).find(".one,.two,.panel").hide();
            $(this).find(".middle-desc").show();
    });  
});

$(".slidedown").click(function(){
      $(this).parents().eq(1).find(".one").hide();
      $(this).parents().eq(1).find(".two").show();
      $(this).parents().eq(1).children(".panel").slideDown("slow");
});

How to show a div only on mouse hover and hide when mouse leaves


Tag : jquery , By : kbrust
Date : March 29 2020, 07:55 AM
I wish this helpful for you That's because you have registered the hover on the image that has the class hover and NOT on the div overlay itlself. So only when your mouse leaves that image will that div get hidden.
Try doing as in the following:
$(document).ready(function() {
    $(".hover").on("mouseenter", function() {
       $(".overlay").show();
    });
    $(".overlay").on("mouseleave", function() {
       $(this).hide();  //or $('.overlay').hide()
    });
});
$(function() {
   $(".hover").mouseenter(function() {
      $(".overlay").show();
   });
   $(".overlay").mouseleave(function() {
      $(this).hide();  //or $('.overlay').hide()
   });
});

when mouse hover hide img and show img


Tag : html , By : Cowtung
Date : March 29 2020, 07:55 AM
help you fix your problem See this fiddle
You should change your CSS a little bit as follows
#img2 {
  display: none;
}

#img1:hover{
  display: none;
}

#img1:hover~#img2 {
  display: block;
}

fixing my hide default and show/hide when it is mouse hover


Tag : javascript , By : Waheedoo
Date : March 29 2020, 07:55 AM
this will help Instead of creating seperate functions for each elements create two generalize functions as below. And to hide and show you should have to use display:none and display:block as below.
function show_title(id){
    document.getElementById('id').style.display="block";
}

function hide_title(id){
    document.getElementById('id').style.display="none";
}
<div class="col-xs-4 col-box1" onMouseOver="show_title('hoverli<?php echo $count ?>')" onMouseOut="hide_title('hoverli<?php echo $count ?>')">

How to avoid Flickering div due to show and hide scrollbar on mouse enter


Tag : html , By : Shitic
Date : March 29 2020, 07:55 AM
it fixes the issue Firstyl you can add CSS width: to scroll bar. After that, add to .parent{} width (subtract scroll bar width from 100%).You can use CSS calc(); function for this. When you hover parent, add CSS width 100% . But if you want to use the table width absolutely 100%, there is a guy solved via jQuery: https://stackoverflow.com/a/17380697/8660891 *Sorry for my bad English :)
::-webkit-scrollbar {
    width: 15px;
    padding:0px;
}
::-webkit-scrollbar-thumb {
  min-height:50px;
  background-color:#888;
  height: 50px;
}
::-webkit-scrollbar-track {
    background: #e3e3e3;
}
.parent {
        width:calc(100% - 15px);
        max-height: 200px;
        overflow-y: hidden;
      }
     
     .parent:hover {
        overflow-y: scroll;
        width: 100%;
     }
     .table {
       width: 100%;
     }
<div class="parent">
   <table class="table">
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
    </table>
</div>
Related Posts Related QUESTIONS :
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • How to bind jquery event to dynamically added multiple DOM elements?
  • How to get td values and store in array using Jquery?
  • How to add handler to dinamically created tr in JQuery?
  • How to Covert Html to PDF in Jquery?
  • Jquery before() and after() used to create a <div> container not inserting closing tags in after()
  • I want to delete previously added class
  • Open html page in same window after clicking on navlink
  • Datatable is not working when I populate table using smarty
  • How to change image based on the offset top of the content div
  • Find the index of table column with specific id
  • How to return value of $(window).resize()
  • How to optimize adding numerous elements dynamically into web page
  • Content slide down on top of page?
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • HTML tags remove from textarea using jQuery
  • ShareThis not display properly when initially hidden
  • jquery - Bind datepicker event
  • How can I cause an element to move on mouse scroll using transform matrix?
  • How to add Custom summaries for autogenerated colums?
  • How to update table row with data from an array using jQuery
  • Cannot get the element in jQuery
  • How to search for two values in array at the same time?
  • Creating a floating document property control that is available in all tabs of Spotfire dashboard
  • Add a "wrapper" div tag to wrap other html div tags?
  • Reload form if I get an error when validate email
  • jQuery animate height in percentage scrolls to the top
  • How to add class for per string after comma?
  • ("ID").Value not working in ASP.net user control
  • HTML Color-picker with colors box
  • Initialize Kendo Grid grouped
  • jQuery click event triggers for all picture objects
  • addClass with the full match of id in jquery
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com