FAQ Database Discussion Community


jquery detect when mouse over tab before closing

jquery,tabs,hover,window,close
I want to display an image on my webpage when the user hovers over the tab top section to close the window. i.e. wait we have special promotion. example can be seen here: http://www.twoj-priz.com/cgi-bin/wingame.pl I tried searching on my own but could'nt find how to do it. Can you kindly...

CSS Why overline doesn't change color and style on hover?

html,css,colors,hover
im trying to do links that when you :hover appears an overline with a diferent color than the text, here's the code it seems to be correct for me but doesn't work and i dont know why :S .subboto a:hover { text-decoration: overline; text-decoration-color: #f7a319; text-decoration-style: dashed; } JSFiddle...

My webpage's buttons won't work. Hover and links not working

html,css,website,hover,anchor
I'm creating this website and I hade made up a nav bar. It had dummy links in the anchor tags and I had a hover property on my buttons. All of this was working properly. I had made a few changes to the code and now none of it works....

When hover at an image, will reduce the opacity and add text

jquery,hover,opacity,line-breaks
As can see at jsfiddle, When hover at the image, opacity of the image will reduce and text will be added to it. http://jsfiddle.net/tangjeen/QPW27/12/ I am having problem here. Any help will be greatly appreciated. When I hover over the image, the image does not appear to be stable, the...

Colour overlay on hover

css3,hover,overlay,css-transforms
I'm playing with a self developed theme on my blog. I've got a grid of images that click through to a particular category. I'm having a problems trying to create a hover effect over the images. I think probably because of the way I've used the link (absolutely positioning it,...

Highlight another elements on hover with CSS [duplicate]

jquery,html,css,css3,hover
This question already has an answer here: Is there a previous sibling selector? 9 answers I have a HTML which looks like this: <p> <a id="foo" href="#bar">FOO</a><br/> <a id="bar" href="#foo">BAR</a><br/> </p> Now I want to highlight "BAR" when "FOO" is hovered, and vice versa. Is there a way to...

How to change hover color for iconfont icons?

html,css,hover,icons
Just beginning learning web development. I understand how to change the hover color for regular links using .classname a:hover{} but every variation of that I've tried hasn't worked. I think there's some quirk to my icons because I downloaded them as an iconfont from flat-icon.com and their instructions (given here:...

Can I activate all child hover states at the same time?

html,css,hyperlink,css-selectors,hover
I hope someone can help. I am trying to create a link with a background image in one div and and text in another. I am trying to create hover states for each which activate as soon as the parent is hovered over, which currently i'm having difficulty with. So...

How to add mouse hover properties to pie drawn on a node in d3?

javascript,css,d3.js,hover
I'm working with a visualization where some of the nodes in the network have pie charts on them with varying radius and varying number of slices based on some parameters. This is what the visualization looks like in the default state: When I hover on a chosen node, only it's...

Changing the hover behavior of dynamically generated classes

javascript,jquery,html,css,hover
My goal is to design an e-commerce storefront with tile design, where the thumbnail of an item is shown, then upon hover, the item name is shows above it. Similar to this, except that it slides up on hover instead of simply appearing. The main problem is that we're using...

JS: Set Background on hovered items

javascript,html,css,hover
I have a 6 <p> tags on my site and want the X to have a different color when it's hovered: HTML: <p>A<span class="del">X</span></p> <p>B<span class="del">X</span></p> <p>C<span class="del">X</span></p> <p>D<span class="del">X</span></p> <p>E<span class="del">X</span></p> <p>F<span class="del">X</span></p> JS: function func(elem) { 'use strict'; elem.style.backgroundColor = "red"; } var spans =...

change image on hover moves images

css,image,hover
I'm having a bit of problem here. I'm trying to display an image in a circle div (using bootstrap), that when hover, the picture becomes a gif, but if you take your mouse from over the picture, it is only a static image. It works, almost, as it moves the...

how to make comment div active on hover

jquery,html,css,hover
i have 4 divs having 4 images.when a user hover over an image the comment div will appear with user comment.my problem is that i want to make that first image active and comment div active on page load.i have given active class to that div but i want to...

CSS Hover div triggering effect on no-child div

html,css3,hover
I am looking for a solution for my css hover problem. I have this HTML #guia { background-image: url(../imgs/guia.png); height: 40vh; width: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; } #celulose { background-image: url(../imgs/celulose.png); } <div id="page"> <div id="top"> <a href="#" target="_blank"> <div class="celuloseHover"> <div> <div> <p>A Lorem ipsum...

hover the entire row of the div display:table properties

html,css,hover
I would like to hover the entire row that contain div cell. The main div has display:table properties. Im trying css3 pseudo classes nth child but not working properly. Any idea would be appreciated, thanks. div.table{ margin:auto; display:table; width:800px; background-color:lightblue; border-collapse:collapse; } div.row { display:table-row; } div.cell { display:table-cell; border:1px...

CSS Menu on hover selector

css,menu,hover,onhover
I am very close. How can I have MENU 1 on my .fiddle display as the default menu option then change when MENU 2 on hover? Thank you in advance. Keep coding! :) ...

Fade on hover using toggle system

javascript,jquery,hover,jquery-animate
When I hover an item, something else should be visible. This works, but how can I animate it? I want it to fade in instead of becoming plain visible. function toggle(){ var workshopscontainer = document.getElementById("workshops-container"); workshopscontainer.classList.toggle("toggle"); } $(".clip").hover(function(e) { e.preventDefault(); toggle(); }); This is the javascript code I'm using to...

CSS3 Hover not working for a Button image to change

html5,css3,hover
I am completely clueless here. I have hover functions working fine on a nav menu with ul li but now I am trying to hover a single button, and after staring at my code for over 15 minutes, I do not get the clue... This is my HTML: <div> <a...

Want to hide
on mouse-over, whilst allowing links behind to be active

html,css,hover
Currently I have a set of links with a div over them. I would like the div to disappear on mouseover allowing the links behind to be clickable. :hover {display: none} on the covering div causes a flickering effect at it's creating a loop so I can't do that. :hover...

jquery hover a div and display image on another div with effect

jquery,html,image,hover,preview
OK javascript newbie here, I want help! Here is the design that explains better the situation. My JSFiddle Here My Code: <div class="design"> <div class="menu">5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in...

Internet Explorer hover/rgba/opacity/css3 compatibility

css3,internet-explorer,hover,internet-explorer-9,rgba
I am using CSS3 with an rgba alpha opacity hover to display text over an image when the user hovers. Works fine in chrome, firefox and safari but when trying in internet explorer (9) it just shows the image and hovering does nothing. Check out the code here: http://jsfiddle.net/b16pow50/ div...

How to apply jQuery to .element:before:hover?

javascript,jquery,html,css,hover
I'm using slick slider, but for whatever the reason when I move mouse over a next or previous button it doesn't change the opacity (mouse-out: 0.5, mouse-in: 1) and it just stays 1, is there a way I could apply jQuery to change the CSS for this task? The elements...

Making a CSS menu with hover animation

css,google-chrome,firefox,menu,hover
I am making a menu with 2 items per line and I want them to have a background-image and on hover the image will change to other. I was able to do it in chrome, using content in CSS, but Firefox and IE don't support this. Thus it should be...

CSS display none on hover for different divs

css,hover
I set up an page with multiple divs, and I want to make it so that when you hover on one div, the other divs disappear. I tried to use this: .Features:hover ~ .Short .Digital { display: none; } <div class="Features"> <h3>Features</h3> <ul class="1"> <li>ABC</li> <li>123</li> <li>Do, rey, mi</li> </ul>...

Disable Hover Effect only on Touch Devices

jquery,ipad,hover,smartphone
My problem is the following: On my local website my main menu has an hover effect (border bottom). As we know it takes a double tap for visitors with touch devices to really tap the link. Is there a chance to disable the hover effect only on touch devices? I've...

Bind on mouseover or hover to dynamically generated elements

javascript,jquery,html,css,hover
I need to bind a hover for items generated in the javascript. For example when I mouseover an icon element, a unique text would appear about that icon: for (var i = 0; i < items.length; i++) { $('.items').append('<div class="icon' + i + '"></div>'); $('.itemInfo').append('<div class="info' + i + '">'...

JavaScript - event.which always return 1 for hovering

javascript,jquery,hover,mouse,mouseclick-event
I would like to hover & mouse left click at the same time on a <div> but event.which always returns 1 : $('#element2').mouseenter(function(event) { switch (event.which) { case 1: alert('Left Mouse pressed.'); break; case 2: alert('Middle Mouse pressed.'); break; case 3: alert('Right Mouse pressed.'); break; default: alert('You have a strange...

CSS Child Hover, Rotate & Clip: Pie Chart Issues

html,css,css3,hover,clip
I have a 3-section pie chart where all 3 sections are virtually identical, yet :hover does not trigger on the first section, and does on the other two. There is an identical number of overlapping parent divs for every element, yet the other two work perfectly fine, so that shouldn't...

Why CSS hover animation work differently of Firefox?

jquery,html,css,firefox,hover
I want to make bootstrap menus dropdown on hover rather than click with some cool animations. So I wrote following code and it's perfectly work on Google Chrome and Internet Explorer. But It's not working on Firefox. if (matchMedia) { var mq = window.matchMedia("(min-width: 768px)"); mq.addListener(WidthChange); WidthChange(mq); } function WidthChange(mq)...

jQuery .hover() fires on old element after hovering on new one

jquery,hover,slide,effects
I Have a div with two labels nested in it which are links to other pages and are one next to the other. I am applying a slide in effect to a third div which is placed under the labels on hovering. The problem I'm encountering is that the effect...

Hover delay / Hover effect staying true after cursor leaving area of effect

html,css,hover
I have started making this webpage with a hover menu of flags ment for changing language of my webpage. there are three flags displayed. This is a hover where the danish and german flag will only appear when i hover over the british flag. This however creates a problem because...

How to image changed and remains the same after mouseleave using Jquery

jquery,html,hover
This is a dropdown menu, when hovered on with an image on it it will be changed to the hovered version of the image and that is the current sitauation now, the problem or my question is when the mouse is hovered on the submenus of the image in will...

Change colour of line hr

html,css,navigation,hover
This is my website.. I need that line on the third section to be black.. I used the hr tag and styled it as white on css because the page after it i need it in a white colour? so how do i style them differently? Sorry, im new to...

Children's hover listening with JavaFX

javafx,hover,listener,children,hbox
Is it possible to add .hoverProperty().addListener to all children(in my case buttons) of HBox? I know that I can assign separate listeners for each button. But I was interested if it is possible to assign one listener to all children at once. Buttons of HBox have 15 px spacing between...

JQuery setInterval with pause on hover

jquery,hover,setinterval,fade,clearinterval
I am trying to get multiple divs to fade in and fade out. Then on hover, pause the animation. Then on hover out, continue the animation. Right now I've gotten this far, the divs fade in and out correctly, and on hover it stops. But when I hover out, the...

how to avoid mouse event conflict with timer

jquery,hover,mouseevent,setinterval
My goal is to hover an element on a webpage, in this case an li tag, causing a main image to swap with an alternate one. While the mouse hovers the li tag, the alternate image is to be visible. The alternate image is to remain visible for n seconds...

toggle pictures by hovering ul li

javascript,css,image,hover
I need it to be a javascript solution only please. Please refer to this demo. The goal is to hover the dots on the right bottom corner and swap the images accordingly. But what it does now is showing a blank page when hovering, and the whole ul becomes vertical...

Hover not working on css menu active li class? Works on others?

html,css,drop-down-menu,menu,hover
I can't seem to get the hover to work on my very first css menu navigation button. It is an active li class, does anyone have any ideas? The other menu option' hover effect is working just fine. CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu > ul {...

Hover effect only on letter (not container)

javascript,css,css3,svg,hover
I have a huge text and would like to trigger a color change when the letters are hovered. This means the white background shouldn't trigger the hover effect, only the black fiill of the letter should trigger it. The default hover effect is triggered when the text container is hovered...

Change current opacity in css image menu

html,css,hover
I have a menu of images where the opacity changes to 1 in the hover state. I also want the "current" member of the list to have an opacity of 1. At this point, the hovering works fine (though I suspect the CSS is inefficient), but the "current" image of...

Diagram: Div hover then Displays Image

javascript,jquery,css,image,hover
ANSWERED: Updated Fiddle I have a Diagram (a .png image) that is placed in a 350x350px square positioned in the centre of the window. I then have 5 div boxes in a fixed position all around the window. What I am trying to achieve is: the original Diagram will be...

a:hover does not wrap child elements

css,hover
I have span and image inside anchor tag, the problem is when I hover them they does not hover as one. <a href=""> <img src="image"/> <span>Shopping Cart</span> </a> a :hover { opacity: 0.6; } Fiddle any help would be appreciated. thank you....

How to add jQuery function to hover (show) and then click to show another menu

javascript,jquery,html,css,hover
Hello I want to ask about jQuery How to add jQuery hover (show) function to my jQuery? ( I want to show #menuwrap when hover that area) 2.I want to add jQuery function, when I click MENU, it will hide #menuwrap again and show another menu content my HTML <!DOCTYPE...

CSS on hover image blinking issue

css,hover,blinking
I tried to make a simple css hover but got blinking image issue. Would you please advise me where I made mistakes? In the meantime, there is a empty gap between a H3 title and .term-image class because of my css settings for a class (.term-desc). Is there a way...

.on('hover') won't work on appended elements

jquery,hover,append,jquery-events
I'm appending some text onto a div using a button, and want something to happen when you hover over it (after it's been appended). I tried using .on('hover' '.class') but so far haven't been able to get it to work. Any help would be appreciated. Here's an example of what...

Retain CSS :hover when changing CSS styles with Javascript

javascript,html,css,hover
I have a div (acting as a button) which has certain CSS that activates when hovered on: #btn{ width: 80%; height: 125px; border: 1px solid #9676E8; border-radius: 10px; transition: background-color 0.25s ease; background-color: #B299F2; color: white; } #btn:hover{ background-color: #9676E8; } Note: #9676E8 is a darker shade of #B299F2, both...

Image pops out container on hover

html,css,hover
On a website I'm working on I got images inside a container that need to zoom on hover. This works smooth BUT.. Whenever an image zooms in or out (when transition is kicking in) the image get's out of the container for the time of the duration. I've adde overflow:hidden...

CSS show div on hover

html,hover
This is my CSS .header_under{ display: none; width: 300px; height: 150px; float: left; background: red } .show:hover ~ .header_under{ display: block; } So what I want is the "header_under" to appear on the website on hover. But it seems not to work HTML: <li class="show"><a href='#'><span>Games4u</span></a></li> And <div class="bildspel"> <div...

Hover over element with CasperJS

javascript,hover,casperjs
How to perform click event on the element which becomes visible after hovering on an element. below is the HTML code <div class="jqtree-element jqtree_common"> <span class="jqtree-title jqtree_common" contenteditable="true">Notebook 1</span> <span class="notebook-right"> <span class="notebook-date disappear" style="visibility: visible;"> <span class="notebook-commands-right"> <span class="notebook-commands appear-wrapper"> <span class="notebook-commands appear" style="display: none;"> <span...

Make text in drop down menu white

html,css,navigation,hover
This is my website.. when you hover over the nav items and a drop down list appears, i want the drop down list to have white text permanently, not turn white. Also if anyone knows how to make it so when you hover over the menu items a black line...

Text flickers on hover CSS

html,css,hover
When hovering over the image to prompt the text to appear, the text and banner flutter once you put the mouse over it. How can this be prevented. Any help would be appreciated thanks. Here's the sample. http://jsfiddle.net/a3mcmbby/ Html: <div id="container-content"> <div id="design-background"> </div> <div id="content"> <div id="table-content"> <table align="center">...

hide or show div, destroy function on hover

jquery,function,hover
I am trying to unbind a specific function on a hover event. A div is shown on page load and fades out after 5 seconds unless that div has been hovered over. How come the function isn't destroyed? I have tried: .off, destroy The code: function fadeOutshowBox (){ $('#showBox').delay(5000).fadeOut(); }...

Change the CSS on hover

html,css,hover
I have the following HTML code: <div class="counters2"> <div class="one_fourth"> Item 1 <h4> 99$ </h4> </div> <div class="one_fourth last"> Item 2 <h4> 139$ </h4> </div> </div> And the following CSS code: .counters2 h4 { font-size: 18px; color: #999; font-weight: 400; margin: 20px 0px 0px 0px; } .counters2 .one_fourth { background-color:...

Hover state still active after mouse leaves div

html,css,hover
I am experiencing a weird issue where the hover state is still being hovered after the mouse leaves the div. To see this hover over the picture. I tried inspecting but I can't figure it out. Youtube video https://youtu.be/PX8psGOTbNM Not working on Wordpress: http://sogomarketingagency.com/test-3/ Works fine on CodePen: http://codepen.io/CookieFresh89/pen/emLXEK I...

website not working on Internet Explorer

internet-explorer,browser,cross-browser,hover
I have a vertical menu in a side bar with a hover over submenu however in IE the hover menu decides to appear in the middle of the page. I'm using IE11 so it doesnt support the IE only css. I'm not sure what has cause the problem..here is a...

A:hover -> DIV doesn't display

html,css,hover
I have a problem with a page on my site (http://www.daklapackmedia.com/minigrip/productgroepen.html) I have a .dropdown class which displays a DIV right under the header, you can see it in the source code underneath <-- START DROPDOWN MENU -->. When i set it to display:block it displays properly. What i'm trying...

Create 3 separate images with hover overlay with links in them

css,image,hover,overlay
Im trying to have 3 separate image links with hover image overlay however I can't seem to achieve this. Each "imgBox" needs a different name as images will be different however when I use "imgBox2" or "imgBox3" and appropriately change the class name in css, it doesn't work. Also, I...

CSS fade-in background image

html,css,css3,hover
I'm learning CSS and I want to make that on a hover on some text, the text disappears and there is a fade-in on an image. I've tested some things but it doesn't work the way I want to do it. The text is a link in a and on...

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...

Make text appear on hover

html,css,text,hover
So I need the text to appear on hover over the image (it doesnt have to be a link if that is too difficult) html <div id="con"> <div id="box1"> <p id="text1"> <a href="url">DESTINATION</a>SS </p> </div> css #con { width:1024px; height:670px; background-color: #161717; } #box1 { float:left; font-size:25px; width:388px; height:477px; background-image:...

Image border hover won't work

html,css,image,hover,border
I have an image centered on the screen that I would like a border around, which when hovered over changes color. I am trying to do this as you can see in the code below, but the problem is that the image just keeps being a link but no border,...

Why is my Hover Function not working Properly?

javascript,jquery,hover
I am making a work index for high school and I am using a JQuery hover function but its acting up. You're supposed to hover over a project link and it shows a little preview picture of it in a box created using CSS, hovering over the link also shows...

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() {...

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...

Hover on one HTML element effect another

html,css,hover
I have shop one Prestashop 1.6.0.14 with many products. The main idea is to make opacity on every displayed products in grid eccept the one that has a hover. Here is my code (simplified):HTML <div id="tab-content"> <ul id="list"> <li class=product></li> <li class=product></li> <li class=product></li> <li class=product></li> <li class=product></li> </ul> </div>...

Deactivate hover state on table rows in Bootstrap Table

css,twitter-bootstrap-3,hover,bootstrap-table
Is there a way to deactivate the hover state on table rows in Bootstrap Table? It automatically set's it there......

CSS / Less / Sass - Match every previous siblings when :hover

html,css,hover,less
In this code: <div id="Container"> <span class='first'>First</span> <span class='second'>Second</span> <span class='third'>Third</span> </div> I want to change color, when :hover. IF (.first:hover) THEN .first { color: red; } IF (.second:hover) THEN .first, .second { color: red; } IF (.third:hover) THEN .first, .second, .third { color: red; } Is this possible without...

Need to apply hover to 2nd div when hover over 1st div

html,css,hover
CSS: #content-items .thumb-artist img { width: 220px; position: relative; z-index: 10; height: 147px; } #filter-artist { font-family: Arial, Helvetica, sans-serif; font-size: 10px; padding: 25px 0 25px 10px; position: relative; font-weight: bold; color: #666666; text-transform: uppercase; float: left; width: 100%; line-height: 1.4em; } #filter-artist #s { border: 0; font-size: 10px; color:...

JavaFX Transition - Darken button on hover

button,javafx,hover,transitions,darken
I'm a beginner in JavaFX. I'm trying to create my own Button subclass that would have its on animations for mouse enter and mouse exit. The animation I'm trying to achieve is a simple "darken" or "dim" transition that would darken the color of the button background when user hovers...

Is there a pure-CSS way to highlight a html table column on hover?

html,css,hover,html-table
Is there a pure-CSS way to highlight a html table column on hover? So when you hover over on <td>, all of the other <td> of that same child position would take on the same style? I looked at <col> tag, but didn't seem to do what I expected....

Css Hover inside [closed]

html,css,hover
I had a table, inside the tr there are td which there is a link. well, i want to make a class that can change the color the link inside the td. here is my code: <style> .dihover{transition: .5s;} .dihover:hover{background-color:#B7192A; color: white; cursor: pointer;} a.setan{color:#7E7E7E;} .setan:hover{color:white;} tr.dihover a:hover{color:white;} </style> <table>...

image hover doesnt work css3

image,css3,hover
the problem is when i hover over images nothing happens. i used analogic code on my other site and everything worked fine. i have no idea whats the issue this is my css: .gallery { padding-left: 10px; } .gallery img { width: 300px; height: 205px; float: left; margin: 10px 10px;...

keep the hover effect on click

css,onclick,hover
i want to keep the hover effect of my div when i click on it how can i do it ? There is my code: i actually want my div with the red background stay in the hover place when i click on the "work" button #work_btn{ position:absolute; top:60%; left:60px;...

Prevent child element hovering from breaking parent hover

javascript,jquery,html,hover
So let's say I have a parent div element that has an img child and that I want to execute some code when the parent element is hovered. <div class="parent"> <img src="link_to_some_image" /> </div> The issue here is that when the child img is hovered, the parent "hover state" breaks....

Font size increase on hover problems?

html,css,text,hover
The problem I'm getting is that when I mouse over the home the font size increases but the text moves down. I tried transform translate, I tried to do position relative then top 25px or whatever but didn't work. here's the hover part: home:hover{ font-size: 25px; } Here's the HTML...

Select the current element jquery - multiple divs

javascript,jquery,hover,jquery-hover
I'm new with jquery and I'm trying to understand how can I hover the current element in my situation: <div class="feat_pic"> <div class="feat_bg_img" style="background-image: url(<?php echo $src[0]; ?> );"><div class="layer"></div></div> <a class="home-feat-title" href="<?php the_permalink(); ?>"><?php get_the_title() ? the_title() : the_ID(); ?></a> </div> <div class="feat_pic"> <div class="feat_bg_img" style="background-image: url(<?php echo $src[0];...

mouse over droop on menu item

jquery,css,hover
Ok, please bear with me as its as confusing for me to explain as it may be for you guys to understand... but! What i want to do, is similar to how on the tabs for chrome you get the weird 'Aura' think following the mouse cursor, but what i...

javafx 8 create images on button on hover using css

css,image,button,hover,javafx-8
I'm making a Mario themed application, and I would like the buttons to have the effect that when the user hovers over it with his/her mouse, a mushroom (image) appears next to the text of the button, and disappears when the mouse moves away.I'm trying to do this using css....

Hover one div and move it up with its content (

)

html,css,hover
Im trying to move a div up when you hover it and so far that works, but the tag inside stays in the same place and i need that it moves with the div. Do you have any suggestions how i can achieve this? thanks for the help! This is...

Concave shape boundary

css3,svg,hover,css-shapes
I am trying to create this shape in CSS/SVG: The problem is that white portion need to be transparent. How do I do that in CSS/SVG? I also need hover on shape. #shape { height: 400px; width: 400px; background: black; overflow: hidden; } #circle1, #circle2, #circle3, #circle4 { background: white;...

CSS bottom border hover “jitter”

html,css,colors,hover,border
I have a navigation bar which I would like to give an orange bottom border when you hover over the navigation buttons. Only problem is that whenever you hover, the border makes the content/navigation buttons "jitter" which they aren't supposed to. Also I already have a black bottom border on...

CSS Transition Effect :: Text changing color, but not border

css,hover,border,css-transitions,border-color
I'm trying to apply a transition effect to some icons. The transition works for the font (FontAwesome), but not for the border, and I'm not sure why. Been trying since yesterday, combed through the web including stackoverflow, but nothing. You can see the example here, and here is the code:...

CSS :hover transform scale command rotate object instead

css,hover,transform,scale
.arrow { display: inline-block; height: 8px; width: 8px; margin-top: 20px; border-top: solid black 2.5px; border-left: solid black 2.5px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: transform 1s; -moz-transition: transform 1s; transition: transform 1s; cursor: pointer; } .arrow::before { content: ""; display: inline-block; width: 18px; margin-left: -3px; margin-bottom: 7px; border-top:...

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...

concatenate hover in out jQuery

jquery,hover
I remember that one time I saw a jQuery in/out hover concatenation like this: $('.xxx').hover(function(){ $(this).css({'background':'white'}); }).(function(){ $(this).css({'background':'red'}); }); But does not work.. what I'm doing wrtong?...

Hover menu behaving eratically

javascript,menu,hover,nav
I have built a simple hover menu. Working example here When the user scroll from the left to the right a little to quicky, or hits the padding and not the grey part the menu slides down and then up and down again. I want it to make it seamless...

Image missing in ::after Pseudo-element

html,css,hover
I have a button with hover effect. When I am applying the hover class then the image(down arrow) is missing. If I remove hover class then I can see the image. Html code with hover class <button type="submit" class="button uppercase btn-1b">home</button> Html code without hover class <button type="submit" class="button uppercase">home</button>...

Picture show text on hover as “rollover”

html,css,css3,hover,css-transitions
I want to make a "roll over text" when you hover the image container. I did it fine, but only with position absolute, but i cant get it right with position relative. Now the Text comes after the Image but i need the text as an small overlay to the...

Jquery show on hover hide on click

jquery,hover,show-hide
I have an element I am trying to have show on hover and stay shown. Then hides when anywhere is clicked or the button previously hovered is clicked. I have code that works, BUT it switches the hover effect if the button is clicked. Button hover = div shown div...

Hover over image making it transparent and showing text

html,css,image,hover,transparency
Hey I'm working on a portfolio page (just using HTML and CSS) and I created a grid of images. My plan is that the one image that is hovered over gets transparent (0.2 transparency or so) and a description text appears at this field. I created following code, but this...

Selecting :hover for multiple elements

css,hover
I have multiple images (.entry) on a page and want to add a button to each that is hidden and displays when the user hovers over the image. I did some research and found how to effect multiple elements when hovering over one. But I want to do the opposite:...

Can general th table styling and class specified th table styling work together?

html,css,hover
So I have a nicely styled table (atleast thats what I think;)) but I also want the TH's of the table have a pop-up info display. To make it a bit clearer: The nicely styled table The pop-up on hover of the TH As you can see on the second...

Activating the hover state of a button when it's clicked until another button is clicked (Javascript/JQuery)

javascript,jquery,html,css,hover
I am currently creating a website for my freelance work and am using the click() and load() functions provided by JQuery. Everything works great, I added the hover effect through classname:hover in css as always. What I want to do now is make a clicked button stay in the hover...

CSS Fade out others

css,hover
Hello I am trying to create a hover effect so when someone hovers over an image withing an LI element this image stays full opacity but the oitehr LI elements fade out slightly. I know this can be done but currently my code is making everything fade out. Please find...

Can I loop through an array to change and elements attributes on hover

jquery,arrays,navigation,hover
This seems a little verbose, is there a better way of doing this? I'm using jquery to change a navigations aria attributes from hidden=true to hidden=false on hover (same for expanded). I'm sure this can be done in far fewer lines of code but i'm not quite sure how. I...

Header Button Hover Colour

jquery,html,css,button,hover
I am about 2 weeks new to web development and I am in the process of making a website. I have been trying to get the hover over the header button working but I can't find a solution. Here is the code. HTML: <!DOCTYPE html> <html lang="en"> <head> <title>Home</title> <meta...

dropdown menu with top triangle

html,css,menu,hover
I want to create a dropdown menu like this: http://www.howdyjeff.com/ but I cant horizontally center the top triangle and the dropdown menu (based on the li a) and I'm having some :hover problem, because the dropdown ul fades away. how can I do that? JSFiddle: https://jsfiddle.net/zw5rqzut/ html { text-align: center;...

My Span goes behind my divs on a hover event

css,hover
First, sorry for my english, I'll try to be as clear as possible. I've tried many things and took a look at some questions related to my problem but I can't solve it... I've made a title with an acronym and I want to explain it when the user put...

How can I remove the generic HTML/CSS tooltip? [duplicate]

html,css,hover,tooltip
This question already has an answer here: Hide title from tooltip 1 answer I found out how to add a good hover tip within CSS classes referenced in HTML here I used a combination of the "title" HTML and lharby's CSS. I have this CSS: span:hover { position:relative; cursor:pointer;...

Getting am image to get larger with roll over, and text when clicked javascript

javascript,html,hover
I am trying to get an image to get bigger with a roll over, then if clicked display text, and clicking on the image again with make the text go away. I am unable to get the text part to work. I can only get the image to get bigger...