hover

CSS Hover Tooltip Bubble Being Hidden Behind iFrame Video

由 寵の児 提交于 2019-12-25 03:53:25
问题 I'm using this CSS script to create tooltip popup bubbles. http://trentrichardson.com/examples/csstooltips/ I have it working ok but it is being hidden by an embedded iframe video in the div below. When I hover over "number one" you can see it get hidden behind the video. However, when I hover over "number eleven" it is displayed correctly in front of the image. I have tried changing the z-index values, but no change. thank for your help <html> <head> <meta http-equiv="Content-Type" content=

How to add a semi transparent box over background image but under text inside div?

由 霸气de小男生 提交于 2019-12-25 03:34:05
问题 This is what I currently have: <div class="square"> <div id="wrapper"> <h2>Text</h2> <h3>Text</h3> </div> </div> .square { padding: 10px; width: 150px; height: 150px; margin-right:50px; margin-bottom: 30px; display: inline-block; background: url('image.png'); vertical-align: top; cursor: pointer; position: relative; } #wrapper { position: absolute; bottom: 5px; width: 150px; max-height: 150px; overflow: hidden; } Now I want to make a semi transparent black box appear when .square is hovered

when hovering over an image, how can I make two or more images change?

由 戏子无情 提交于 2019-12-25 03:24:34
问题 I was wondering if you can tell me how I can do the following: when hovering over an image, two or more images change. Im kind of new at this, so please give me clear directions 回答1: Adapt this example to suit. var image1 = document.getElementById('image1'), image2 = document.getElementById('image2'), image3 = document.getElementById('image3'); image1.onmouseover = function() { image2.src = 'whatever.jpg'; image3.src = 'something.png'; } 来源： https://stackoverflow.com/questions/6328580/when

How to move a span to a different position in a DIV

由 老子叫甜甜 提交于 2019-12-25 02:49:35
问题 I have the following codes in my slider which displays a navigational arrow and bullets: <div id="slider1_container" style="width: 1300px; height: 600px; overflow: hidden;"> <!-- NAVIGATION START --> <div u="navigator" class="jssorn21" style="background-color: #00FF00; position: absolute; bottom: 20px; left: 0px;"> <div u="prototype" style="background-color: #0000FF; POSITION: absolute; WIDTH: 19px; HEIGHT: 19px; text-align: center; line-height: 19px; color: White; font-size: 12px;"></div> <

Text over image using CSS transitions

由 对着背影说爱祢 提交于 2019-12-25 02:38:29
问题 I am an illustrator making a portfolio site. I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image. 回答1: Do you mean something like this - DEMO? What I've done is, I've created two classes ( .pic and .text ). .pic holds the picture and the other class contains the text. The .text class is positioned at the bottom of .pic and it has a height of 0; To make the text

IE9 - Position: relative; hover issue

由 我是研究僧i 提交于 2019-12-25 02:03:33
问题 I'm getting some strange hover behaviour from IE9 which seems to be resulting from positioning an element relative to a parent. It's a bit difficult to explain so I've made a working example available here: http://jsfiddle.net/CVPhW/2/ I've stripped it out as much as I can but I left all the containing div s in there in case they were somehow relevant. Try hovering your cursor over the very bottom of each button and you'll see the hover doesn't activate unless you move the cursor around 10

uni-app视图容器

由 非 Y 不嫁゛ 提交于 2019-12-25 01:31:49
view view:相当于HTML中的div，独占一行，不设置宽度时，宽占满整个屏幕 <view hover-class='click' hover-start-time='1000' hover-stay-time='1000'>1</view> hover-class：相当于设置了一个class名，可以在style标签中设置样式，这个样式会在点击元素时生效 :hover-start-time='1000'：设置点击多长时间后样式生效，注：在属性前面必须加上“：”，不然控制台会警告如下： vue.runtime.esm.js:619 [Vue warn]: Invalid prop: type check failed for prop "hoverStartTime". Expected Number with value 1000, got String with value "1000". :hover-stay-time='1000'：设置点击结束后样式生效维持的时间，同样在属性前面需要加上“：” 来源： CSDN 作者： 海绵杨宝宝 链接： https://blog.csdn.net/qq_41820577/article/details/103684130

Slider Pure CSS => Text instead of bullets point / Hover on text to change image

由 喜欢而已 提交于 2019-12-25 00:26:58
问题 I'm trying to do a Pure CSS slider but I tried many options (visibility: hidden;, z-index: 11,22,33..) but I didn't find the right way to make it works. I would like to show a default image (slide-0) until the user mousehover a link below the slider. In this screenshot, no links is hovered so the default image is displayed: https://ibb.co/dX9YBm My objective: 5 links (button-slider) under a default image. When the user mousehover a link, the image change. Each links display it's own image.

How to remove hover state when the element moves

由 杀马特。学长 韩版系。学妹 提交于 2019-12-24 22:03:37
问题 I have this example: <div class="container"> <div class="bp"></div> </div> http://jsfiddle.net/VKwjD/20/ if you hover the same square, his color changes; if you click, the parent size changes so the square move. My problem is: If you don't move your mouse after the click, the square stays in the hover state... Why ? It's possible to remove this state after the click? without moving the mouse... Thank you for your help 回答1: HTML: <div class="container"> <div class="bp" id="bp"></div> </div>

How to move text to left on hover?

由 戏子无情 提交于 2019-12-24 21:21:19
问题 When the mouse cursor has hovered at the button, the text moves down, I need to move text only to the left by 5px , when hovering on the button, how to implement it? div { text-align: center; } span { margin-right: 10px; } button { background: green; border: none; padding: 9px; color: #FFF; border-radius: 50%; cursor: pointer; transition: all 500ms ease; } button:hover { padding: 13px; transition: all 500ms ease; } <div> <span>test</span><button>⟶</button> </div> 回答1: The "issue" you're
订阅 hover