hover | 易学教程

Preventing Hover event of a Div triggering on parent Div?

阅读更多关于 Preventing Hover event of a Div triggering on parent Div?

问题 When I mouseover .mensal DIV it will trigger the mouseover the parent .opera DIV, which seems wrong to me. I just want the "highlight" effect to to work on the child .opera DIV. #operaContent { padding: 0 50px 0 50px; position: relative; overflow: visible; } #operaContent .opera { display: block; border: 1px solid #FFFFFF; border-bottom: 1px solid #DDDDDD; padding: 5px; margin-bottom: 10px; height: 120px; background-color: #0A8ECC; } #operaContent .opera:hover { border: 1px solid #AAAAAA;

导航条

阅读更多关于导航条

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Menu - Horizontal</title> <style type="text/css"> ul#navmenu { margin: 0; border: 0 none; padding: 0; width:790px; /*For KHTML*/ list-style: none; height:30px; background:#f90; } ul#navmenu li { margin: 0; border: 0 none; padding: 0; float: left; /*For Gecko*/ display: inline; list-style: none; position: relative; height:30px; background

how to trigger css transition before hover

阅读更多关于 how to trigger css transition before hover

问题 So, I made sidebar hidden and shows up when on mouse hover. My question is how to trigger the css transition before the mouse hover on the sidebar, just like in this sidebar link: https://la24.org/vision . how I do that? many thanks 回答1: There are two ways doing it. Javascript - Just toggle expanded class whenever needed. Pure CSS - Sideabar Wrapper and Sidebar element In this case you can trigger your .sidebar animation on .sidebar-wrapper hover: .sidebar-wrapper:hover > .sidebar{ **Your

Can't stop animation fro cycling

阅读更多关于 Can't stop animation fro cycling

问题 I have three images in a row. I want to enlarge the one that the mouse is over until the mouse is moved off of it. This sort of works in my jsfiddle but, as you can see, the animation doesn't stop after enlarging. The other threads on this problem say to set the iteration count and forwards options, which I've done. The only other solution I could find was to use javascript to control it. Is there a way to do this with just css? Here's my code: <style> #set2 {margin-left:40px; display:inline

I want the div show when mouse hover on another, and disppear automatic after few seconds with jquery

阅读更多关于 I want the div show when mouse hover on another, and disppear automatic after few seconds with jquery

问题 first here is my html code: <div class="outter"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="inner"></div> when my mouse over the "item",the "inner" show,when mouseout the "inner" disppeared: $(".item").hover(function(){ // setTimeout(function(){$('.inner').hide('slow');},2000); $('.inner').show('slow'); },function(){ $('.inner').stop(true, true).hide('slow'); }) as well I want when "inner" showed,it will disppear

Show DIV submenu dropdown when hovering

阅读更多关于 Show DIV submenu dropdown when hovering

问题 I am trying to create a very simple hover/drop menu using DIVs, no UL/LI. My current code shows the menu with 3 options, but what I need is to have a submenu under Link 2. Here is my current code. .dropbtn { background-color: #4CAF50; color: white; padding: 0px; font-size: 12px; border: none; cursor: pointer; } .dropdown { margin-top:200px; position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 30px; box-shadow

Highlight links an corresponding images on hover

阅读更多关于 Highlight links an corresponding images on hover

问题 Working on a project an need a specific effect on the homepage. When a user hovers over the links in the nav the link is highlighted as well as the corresponding thumbnail on the page. Each of the links/thumbnails have classes an how we have it setup now is that on hover we search for the the element with the same class. Just wondering if there is a better way to go about doing this. Thanks. (The layout of the page has the links on the left side an the thumbs in the "main" container which

transform: translate() and matrix3d() break hover and click in Microsoft Edge

阅读更多关于 transform: translate() and matrix3d() break hover and click in Microsoft Edge

问题 A situation arises with block elements that use transform: translate() and matrix3d() as part of an animation sequence (animation is by GSAP, but that shouldn't be relevant to the problem since all GSAP does is update CSS properties in real-time). Expected: Regardless of size or position, elements should remain interactive to mouse. (works properly in Chrome, FF, Safari, IE11). Actual: Some will work, once or twice, if you're lucky, and then after that none of the others will respond to the

Grayscale hover effect slow in FF, fast in Chrome, IE and others

阅读更多关于 Grayscale hover effect slow in FF, fast in Chrome, IE and others

问题 Not sure what is going on. The hover effect on the page below is very slow to respond in Firefox. When you scroll, the page is not smooth either. This particular page runs smoothly in other current browsers. The site is very fast so I am not sure what to think. http://thebc.co/our-work 来源： https://stackoverflow.com/questions/13304218/grayscale-hover-effect-slow-in-ff-fast-in-chrome-ie-and-others

Grayscale hover effect slow in FF, fast in Chrome, IE and others

阅读更多关于 Grayscale hover effect slow in FF, fast in Chrome, IE and others