FAQ Database Discussion Community


Show non-nested div on hover and hide after delay

jquery,mouseover,show-hide
I am trying to show div #2 when div #1 is moused-over. If div #2 isn't moused-over within a short period of time (say 3 seconds) then it hides. I have got the code semi-working but it acts really buggy. Sometimes it doesn't hide at all and I can't figure...

mouse over image with innerHTML

javascript,jquery,html,image,mouseover
I need to swap the image out when it's moused over. It should be using innerHTML as well I believe. <body> <a href="#">anime</a> <a href="#">ponies</a> <h1 class="panel">What fandom is better?</h1> <div class="anime"> <img src="img/anime.png"> </div> <div class="pony"> <img src="img/pony.png"> </div> <p id="answer">Choose One</p> </body> /** This is for element changes...

3D effect button hover state CSS (Possible bug?)

css,button,3d,hover,mouseover
Just wondered if any one had any experience with fixing an issue i have using 3D effect hover states for buttons. http://jsfiddle.net/andeh/b47xor6d/ .button{ cursor: pointer; display: block; line-height: 44px; height: 44px; width: 159px; background: #ff9600; border-radius: 5px; text-align: center; font-size: 18px; color: #fff; } .button:hover { display: block; min-height: 44px;...

using mouseover to show search input type

jquery,toggle,show,mouseover
I'm trying to achieve a jquery function, by mouseoever a submit button, I want my search input type to appear, the same kind of effect as a slideToggle. I don't want to use width toggle because I don't want my search input to hide when hovering again my submit button....

Javascript | Uncaught TypeError: Cannot set property 'color' of undefined

javascript,html,css,mouseover
I have an div which changes the css of elements inside it when hovered on/off. However I get an error when I mouseover and mouseout, and the color is not changed (the error is in the title of this question) Whats interesting is the first two changes work (changing the...

Nested elements firing parent's event even after stopPropagation

javascript,jquery,html,css,mouseover
I have an anchor tag(parent) containing an image(child) and a span(child). There is a dropdown div which i want to display when a user mouseover on the anchor tag. That dropdown should hide when the user mouseover on that anchor tag second time. I added mouseover event on the anchor...

CSS3 Trigger mouseover state on document ready

jquery,html5,css3,triggers,mouseover
I know, there are plenty of posts relating to this topic, but for some reasons I wasn't able to apply the answers to my case and hope someone can help me with that in particular. Basically, I want my menu to blink once in the style of the navigation class...

Mouseover Event for Table Cells

html,css,table,cell,mouseover
I know mouseover questions have been asked already but hear me out, my request is little different. I am trying to set up a table on a google sites page with the following properties: spanning the entire width of the site clickable (link) cells staggered design cell mouseover - each...

How do I set the borders in which I want my children to move when following the cursor on a movement?

jquery,parent-child,mouseover,area
I am making a project in which I have to add some googly eyes to a face in jQuery. I have the design in CSS and my divs in HTML I now want to add the mouse movement with Jquery. I found a very helpful answer on this site and...

mouseenter mouseleave within contents of iframe

javascript,jquery,iframe,mouseover,mouseenter
I'm trying to highlight elements within a iframe with no success. I've tried using mouseenter/mouseleave with no success. It does not fire. $('#iframe').contents().mouseenter(function (e) { //var element = $(e.target); var element = $(this); $(element).addClass("highlight"); }).mouseleave(function (e) { $(element).removeClass("highlight"); }); I've had better success with mousemove however it highlights the parents...

asp.net gridview stop header and footer from changing color on mouseover

jquery,asp.net,gridview,mouseover
I am using the following jquery script to highlight each row on an asp.net gridview and works fine. However the header and footer of the grid also change color on mouseover, which obviously I don't want it to happen. Any ideas what else I need to insert on the script...

toggle search input when mouseenter a div, then hide search input when mouseout

jquery,forms,toggle,mouseover,mouseout
I'm using a searchform on my website (I can't change the HTML structure as it's the searchform generated by Wordpress). I have a search icons, and my searchform is hidden. when mouseenter the search div, I want to toggle my searchform, the searchform stay visible when entering text inside, and...

jQuery link works when click on parent parent div

jquery,html,hyperlink,mouseover
I have a div (A), and inside another div(B), and then i have my link. What I would like to happen is that When we click on A, the link inside div(B) works. I succeeded to do it with one parent, but not 2... $(".block").mouseover(function() { if ($(".block .button").length) {...

jquery enable :hover of div on other div mousover

jquery,hover,mouseevent,mouseover
I need TOGGLE :hover action of specific div, but also when mouse cursor is over other DIV <div class="ms-thumb"> <div class="ms-product-thumb"> <div class="ms-thumb-hover"> .ms-thumb-hover </div> </div> <div class="ms-thumb-desc"> on this mouseover: make '.ms-thumb-hover' red! </div> </div> jQuery <script> $('.ms-thumb-desc').hover(function(){ $('.ms-thumb-hover').hover(); }); </script> Here is Fiddle : http://jsfiddle.net/u4a1z3d2/3/ Explain please why...

Enlarge image through mouseover using JavaScript

javascript,html,css,image,mouseover
As part of an assignment I have to enlargen an image using JavaScript through a mouseover. When the image is enlarged it shouldn't move any of the other elements on the page however. When the mouse is moved from the image, it should restore back to the original size. This...

Change text on hover

jquery,hover,mouseover
I want to change a text of selected input to ccc. I tried using .hover, but nothing happened. $(function() { $(".xxx").each(function() { $(this).on("click", function() { if ($(this).is(":checked")) { $(this).next().html("bbb"); $(this).parents(".checkbox").toggleClass("selected"); } else { $(this).next().html("aaa"); $(this).parents(".checkbox").toggleClass("selected"); } }); }); $(".checkbox.selected").each(function() { $(this) .on("mouseover", function() { $(this).find("p").html("ccc"); }) .on("mouseout", function() {...

Cocoa osx NSButton show text when mouse over

osx,cocoa,text,mouseover,nsbutton
In my application for Mac I want to show some info text when the users moves the mouse pointer over a button. Something like this: How can I achieve this correctly? Thanks in advance....

why doesn't this drop-down menu work with mouseover and leave?

javascript,css,drop-down-menu,mouseover,mouseleave
I want it to display "you" under "Home" when hovering and disappearing when mouse leaving: // HTML <ul> <li><a id="homeBox" href="#">Home</a> <ul><li><a id="homeSub" href="#">you</a></li></ul> </li> </ul> // javaScript var homeB= document.getElementById("homeBox"); var homeS = document.getElementById("homeSub") homeBox.mouseover = function() { var homeS = document.getElementById("homeSub").style.display= "block"; } homeBox.mouseleave = function() { var...

Mouseout and closing dialog

javascript,jquery,html,mouseover
I have a link to show a dialog by hovering it, I would like to know if there is a way in which : If I hover the link and the dialog shows but i don't enter into the dialog, and I mouse out the link the dialog will be...

jquery div caption hover an image

jquery,css,mouseover
I have a script with loops to generate thumbnails images. I add a div hidden hover each thumbnail to show associate caption. But i'm not able to to show caption when mouse over the image.. Here is my jsfiddle to understand it: https://jsfiddle.net/mytom/zgytmyt0/ -> I want to show caption when...

mouseover event to control fadeto

javascript,jquery,mouseover,mouseenter,fadeto
I'm trying to cause an image to fadeTo to a particular opacity but triggered when the mouseover (mouseenter, mouseleave) is on the parent div. The code below shows two div elements (working fine) but for some reason it doesn't work when i change ".children("div")" to ".children("img")" given that I actually...

How can I show a mouse hover info box? [closed]

javascript,php,jquery,mysql,mouseover
I have a php website where I use mysql as database. I want a feature like https://www.instantssl.com their bottom right corner seal. Its showing specific info when anyone hover the mouse or click it. I want the same feature. how can I do it? ...

Play a frame of a Movieclip when MOUSE_OVER

actionscript-3,flash,mouseevent,mouseover
I have a map with different countries. When i hover over one of the countries, i want it to play a certain frame of a movieclip. I've made a movieclip for each country, which has 2 frames. The 1. frame is just the picture of the country like it appears...

How to create both onClick and mouseover to a link jQuery

jquery,function,onclick,hover,mouseover
I have this script to change main image on click to a link with .feature_thumb class. I want to make it so that it's both click and hover. $(".feature_thumb").click(function(){ var main_href = $(this).attr('href'); change_image(main_href ); }); Can someone help me with this? I tried this but it didn't work... $(".feature_thumb").on('click...

jQuery / CSS: Changing border color not working properly with border-collapse

jquery,css,css3,hover,mouseover
I am new to CSS and jQuery and hope someone can help me with this. I have a large HTML table that is created dynamically. Within this table I just want to highlight the borders of a td when hovering over it. First I tried to use :hover in CSS...

Bordered box effect on hover

jquery,mouseover,mousemove,mouseout
I have an aesthetic piece of functionality I am trying to create. The "look" is a box, which has lots of moving about borders when the box is hovered over. This is the design graphic: The solution I have is that .on('mousemove') a new div with a border is created....

Why eventhandler function in document.ready works but doesn't work when taken out?

javascript,jquery,function,mouseover,eventhandler
I am new to Javascript and I am wondering on the behavior below. Consider the working code below: <div><br/><strong>Click Me!</strong></div> <script> $(document).ready(function(){ $('div').mouseenter(function(){ $(this).fadeTo('fast',1); }); $('div').mouseleave(function(){ $(this).fadeTo('fast',0.5); }); }); </script> But this one does not work: <div onmouseover="fade()"><br/><strong>Click Me!</strong></div> <script> $(document).ready(function(){...

Uncaught SyntaxError: Unexpected token with mouseover event in D3 Treemap

javascript,d3.js,javascript-events,mouseover,treemap
I am working on putting together a zoomable treemap using D3. I'm starting with basic code at https://gist.github.com/vibster/3257874. I'm including the git for the whole code, but will include the relevant section below. To the cell variable, I am adding a mouse over function from this previous answer: Zoomable treemap...

Change CSS of an object that I'm listening to an event Javascript

javascript,css,events,object,mouseover
I am listening an event from an object in Javascript, and I don't know how to change the CSS. I tried to pass the object in the function parameters but it doesn't work. My code: auxiliar.addEventListener('mouseover',function mouseOver(){ console.log("debug mouse over"); //Here I want change the CSS class of auxiliar });...

dispatch mouse out event when the mouse not out

actionscript-3,events,tooltip,mouseevent,mouseover
I created a tooltip class. When the mouse over on MovieClip it enable and when it out it disable. The movieclip containt some other movieclips. My code is that: to.addEventListener(MouseEvent.MOUSE_OVER, showTip); to.addEventListener(MouseEvent.MOUSE_OUT, hideTip); to.addEventListener(MouseEvent.MOUSE_MOVE, MoveTip); and the functions is that: private function showTip(evt: MouseEvent) { if (tip != null &&...

Bar Chart outside bounds and mouseover event issue

javascript,d3.js,charts,mouseover,dimple.js
Here is my dimple.js code, the bar chart that it produces is outside the bounds and touching Y-axis. Mouseover event is not changing the color of the bars. Below is the image var myChart2 = new dimple.chart(svg,data); myChart2.setBounds(750,50,550,250); var x = myChart2.addTimeAxis( "x", "date", "%m/%d/%Y", "%d-%b"); x.floatingBarWidth = 21;...

Highchart series mouseover

highcharts,mouseover,series
I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong? You can see a http://jsfiddle.net/ncdysafk/ var chart; var options =...

HTML help for mouseover split button image

image,split,mouseover
I am a neophyte at HTML as my question may reflect, but I could use some help. I have a table cell that contains what looks line one button but is actually two side by side. My goal is when the one on the left is hovered over in the...

Hover over div changes another div heading

jquery,css,mouseover,active,jquery-hover
I will try to explain this the best I can. I have 5 boxes and want 1 box to have a different heading color. When I hover over the other 4 boxes I want the active box heading to change, resulting in the new heading to be a different color....

jQuery: How to show a checkbox value on mouseover (without title attribute)

javascript,jquery,mouseover,title
I am pretty new to jQuery and need some help with the following. I have a HTML page with a large, dynamic number of checkboxes and would like to show a checkbox' value on mouseover without having to add a title attribute in the code for each of them. Also,...