hover

CSS: Expanding a <div> from right to left to reveal text

由 白昼怎懂夜的黑 提交于 2020-06-26 04:08:04
问题 I'd like to set up a fixed <div> , containing an icon, which expands from right to left when being hovered over (the <div> expands, not the icon), revealing a piece of text on the left side of the icon. The icon's position stays unchanged. Here's a sketch to help illustrate what I'd like to do: Changing the size of the <div> on hover is no issue, I simply add a class with a larger width (including a transition to animate the expansion). But I struggle with the positioning of the elements. I

Firefox: how to stop and inspect new styles added when hovering on an element?

由 僤鯓⒐⒋嵵緔 提交于 2020-06-12 07:42:51
问题 I am using Firefox for development. I would like to see what CSS styles are added to A tag when I hover the mouse over it. How can I do this in Firefox? UPDATE I right-clicked on the tag and select inspect the element. I can see the styles added to the bottom right pane. However, if I move the mouse to the css pane to examine styles, then the added CSS styles disappear. I understand that I may need to break on something, but I cannot get it working. Thanks! 回答1: Right click → Inspect Element

translateY() triggered when hovered from point of origin

由 时间秒杀一切 提交于 2020-05-24 03:49:09
问题 is it possible not to trigger the animation indefinitely when you move the cursor at the bottom of the button? here's how it looks like -- gif and codepen .container { padding: 1rem; } .container .here { text-decoration: none; color: white; background: darkgreen; display: inline-block; margin: 2rem; padding: 1rem; transition: all .1s; } .container .here:hover { transform: translateY(-1.5rem) scale(1.5); } <div class="container"> <div class="here">hover here</div> </div> 回答1: Make the button

Disable hover on specific div

由 主宰稳场 提交于 2020-05-21 06:26:32
问题 When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears. THE PROBLEM If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help. I need to remove all hover effects on my #image-divs HTML <div id="box"> <div id="icons1"> <div id="image1"></div> </div> <div id="icons2"> <div id="image2"></div> </div> <div id="icons3"> <div id="image3"></div> </div> <div id=

Disable hover on specific div

由 北慕城南 提交于 2020-05-21 06:23:11
问题 When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears. THE PROBLEM If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help. I need to remove all hover effects on my #image-divs HTML <div id="box"> <div id="icons1"> <div id="image1"></div> </div> <div id="icons2"> <div id="image2"></div> </div> <div id="icons3"> <div id="image3"></div> </div> <div id=

Why :hover is so slow in webkit browsers over large numbers of DOM elements

由 僤鯓⒐⒋嵵緔 提交于 2020-05-12 20:33:16
问题 When there are numerous DOM loaded with javascript elements styled with :hover pseudo class (like a long table), the effect is rendered slow/laggy in Chrome & Safari. Firefox appears to handle the large number of rows with :hover fairly quickly compared with webkit. For example, you can see the difference by generating 10,000 rows with a :hover effect. http://jsfiddle.net/jschin/VwmjT/ var table = document.createElement('table'); for (var i=0; i<10000; i++) { var r = document.createElement(

Why :hover is so slow in webkit browsers over large numbers of DOM elements

由 笑着哭i 提交于 2020-05-12 20:32:49
问题 When there are numerous DOM loaded with javascript elements styled with :hover pseudo class (like a long table), the effect is rendered slow/laggy in Chrome & Safari. Firefox appears to handle the large number of rows with :hover fairly quickly compared with webkit. For example, you can see the difference by generating 10,000 rows with a :hover effect. http://jsfiddle.net/jschin/VwmjT/ var table = document.createElement('table'); for (var i=0; i<10000; i++) { var r = document.createElement(

Css, Safari :hover and child visibility

由 懵懂的女人 提交于 2020-04-18 03:54:22
问题 I have one issue with Safari. My page displays a video player with some controls that are made visible ( visibility: visible ) when the mouse move over the player. This "effect" is achieved with a simple CSS rule that fails under Safari. <div class="player"> <!-- ... --> <ol class="player-controls"> <li>Prev.</li> </ol> </div> .player-controls li { visibility: hidden; } .player:hover .player-controls li, .player .player-controls:hover li, .player .player-controls li:hover, .player:fullscreen

CSS Link（链接）

由 梦想的初衷 提交于 2020-04-06 18:36:33
CSS Link（链接） 不同的链接可以有不同的样式。 一、链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面 二、常见的链接样式 根据上述链接的颜色变化的例子，看它是在什么状态。 让我们通过一些其他常见的方式转到链接样式： 1，文本修饰 text-decoration 属性主要用于删除链接中的下划线： a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text

Rotate Parent but not child on hover

由 岁酱吖の 提交于 2020-04-06 11:16:06
问题 The <figure> element should rotate on hover but not its child, the <img> . Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect. .about__image { margin: 4rem; width: 27rem; height: 27rem; float: left; -webkit-shape-outside: circle(50% at 50% 50%); shape-outside: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); position: relative; background-image: radial-gradient(at left top, red 25%, blue 55%);
订阅 hover