hover

on hover overlay image in CSS

由 狂风中的少年 提交于 2019-12-18 05:21:21
问题 I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll

CSS属性——transform

由 孤街浪徒 提交于 2019-12-18 03:55:31
原则 : 对谁做过渡,过渡效果就加在谁身上. 一、2D变形—移动 translate : 在2D范围内移动 可以单独设置X、Y轴,也可以结合使用 transition : 结合translate使用,过渡效果的属性、时间以及何种效果 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > < / title > < style > div { width : 100 px ; height : 100 px ; background - color : green ; /*设置过渡效果*/ transition : all 0.5 s linear ; } div : hover { /*transform: translateX(100px);*/ /*transform: translateY(100px);*/ transform : translate ( 100 px , 200 px ) ; } < / style > < / head > < body > < div > 我要移动 < / div > < / body > < / html > 运行效果: 在0.5秒内,匀速移动,X轴移动100px,Y轴移动200px 二、2D变形—缩放 scale :

How to simulate hover effect on touch devices?

由 烂漫一生 提交于 2019-12-18 03:39:11
问题 I have a web page with some css3 animation on hover and I would like to make it work on iPad (and any touch enabled device) when the user touch these elements. Here's my code: html: <div id="headBlock"> <a id="arm"></a> <div id="head"> <div id="blink"></div> <div id="lid"></div> <div id="man"></div> <a id="man-arm"></a> </div> </div> js: //arm $('#arm').hover(function(){ $(this).removeAttr('style').css('bottom','244px'); $(this).addClass('hover_effect'); }, function(){ $(this).removeClass(

simple Jquery hover enlarge

由 旧街凉风 提交于 2019-12-17 23:27:51
问题 I'm not sure where I'm going wrong. I'm trying to create a very simple hover-enlarge plugin with Jquery using the scale function. Here is my code: $(document).ready(function(){ $("#content img").toggle("scale",{ percent: "80%" },0); $('#content img').hover(function() { $(this).css("cursor", "pointer"); $(this).toggle("scale",{ percent: "90%" },500); }, function() { $(this).toggle("scale",{ percent: "80%" },500); }); }); Here's a small example: http://jsfiddle.net/8ECh6/ Here's the page: http:

CSS :: child set to change color on parent hover, but changes also when hovered itself

由 我怕爱的太早我们不能终老 提交于 2019-12-17 22:38:54
问题 I have an <a> with a <span> children. I have written some CSS which changes the border-color of the children when the parent is hovered, but it also changes the border-color when I hover the children, which it shouldn't. a { padding: 50px; border: 1px solid black; } a span { position: absolute; top: 200px; padding: 30px; border: 10px solid green; } a:hover span { border: 10px solid red; } <a> Parent text <span>Child text</span> </a> 回答1: Update The below made sense for 2013. However, now, I

The way to stop and continue animation while mouseover and mouseout in JQuery

由 落花浮王杯 提交于 2019-12-17 20:31:28
问题 E.g: a simple example to explain: $('.moveDiv').animate({ "margin-left": 2000 }, 20000, 'linear'); the moveDiv element would move to left when it was loaded,and now, when the mouse move over the moveDiv element , I wish it to stop and continue to move when the mouse move out ! Any ideas? I found this code in this question of stackoverflow,so , I just want to modify the code to make it could stop and continue animation when mouse hover!! the demo of the code 回答1: Pause / Resume Animation

jQuery hover event on <a> tag on mobile devices

由 匆匆过客 提交于 2019-12-17 20:31:15
问题 The jQuery .hover() event seems to work fine on mobile devices (testing it on iOS 5.1 Safari) as long as it's not on a anchor element <a> . Work fine means it will trigger the hover handler that is bound on it. But, when the hover event is on <a> , the browser is redirected to the URL from href instead. I want it to hover first on first touch (run the event handler) before it's being redirected (trigger the click) on second touch. Is there any way of doing this? 回答1: You must add an event

adding tooltips to pie chart using d3.js

由 痴心易碎 提交于 2019-12-17 19:50:55
问题 I am embarking on a journey to learn to visualize data using d3.js, and so far I am finding the "Interactive Data Visualization" by Scott Murray very helpful. I was following through some of the example codes in book chapter 11, and was wondering how I would add the tooltip to the pie chart (the book already describes this procedure using the bar chart). Anyways, just been tinkering around with the codes for past couple of hours and would like to see if anyone can lend me a hand on this: <

CSS3 Transitions: is there an on click option without using JQuery?

由 烈酒焚心 提交于 2019-12-17 18:52:36
问题 This works great: <style type="text/css"> div { width:100px; height:100px; background:red; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> But does anyone know of a way to do this using click instead of hover? And not involving JQuery? Thanks! 回答1: You can write like this: CSS input{display:none} .ani { width:100px; height:100px; background:red;

How to hover over an SVG rect?

由 随声附和 提交于 2019-12-17 18:15:40
问题 In this piece of SVG (tried in FF 8, Safari 5.1.2, Chrome 16, all on Mac), when moving mouse over the bar, none of the browsers properly detect each on-mouse-over/out event, sometimes it works sometimes it doesnt. But it's consistent across all the browsers so it's probably something about the SVG code. Using onmouseover and onmouseout gives the same result - doesn't work properly. What would be the correct way of implementing on hover for SVG rect angles? <?xml version="1.0" encoding="UTF-8"
订阅 hover