div

Hide div element with jQuery, when mouse isn't moving for a period of time?

匿名 (未验证) 提交于 2019-12-03 02:49:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I have a broadcasting video site, with a menu, which should be hidden, when mouse isn't moving for a while (lets say 10 seconds). As well, it should appears back, with mouse move. What is the best way to perform that, by using css and jQuery? Thank you in advance. 回答1: Take a look at the mousemove event. You can try something like this: var i = null; $("#element").mousemove(function() { clearTimeout(i); $("#menu").show(); i = setTimeout(function () { $("#menu").hide(); }, 10000); }).mouseleave(function() { clearTimeout(i); $("#menu").hide();

Hide elements behind transparent DIV but not background

匿名 (未验证) 提交于 2019-12-03 02:49:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: so I have circled divs (with border-radius ) and each one is connected with a line. Problem is that they are semi-transparent, and they're connected from the center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery. Here's my simulated situation (in my code lines generate automatically): https://jsfiddle.net/muud6rqf/2/ body{ background:

jQuery fade in/out div to a different div?

匿名 (未验证) 提交于 2019-12-03 02:49:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Is it possible to have a div fade out, then fade in at the same place with a different div with different content when you click a link or button? It'd obviously use the .fadeIn() and .fadeOut() functions but I'm not sure what all the code would look like, especially with positioning, and the ability to do it twice on the same page. 回答1: If you're looking to fade out one </div> then fade in a different one: <div id="div1"></div> <div id="div2" style="display: none"></div> <div><a href="#" id="triggerButton">Swap Divs</a></div> $('

Scrolling div without fixed height

匿名 (未验证) 提交于 2019-12-03 02:45:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I need to build a dynamically-resizing scrolling div. The div should dynamically resize to fit the screen. But if the content doesn't fit on the screen, it should display a scrollbar. So the browser's own scrollbar should never need to become active. I can get a scrollbar to appear in the div by placing another div inside it and using overflow: auto . <div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" > <div id="gridcontent" style="height:100%"> <!--Put loads of text in here--> </div> </div> The trouble is that this

Position DIV relative to another DIV?

匿名 (未验证) 提交于 2019-12-03 02:45:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: Is it possible to position a DIV relative to another DIV? I imagine this can be done by first placing it inside of the reference DIV, and then using position: relative . However, I can't figure out how to do this without affecting the contents of the reference DIV. How can I do this properly? See: http://jsfiddle.net/CDmGQ Thanks! =) 回答1: First set position of the parent DIV to relative (specifying the offset, i.e. left , top etc. is not necessary) and then apply position: absolute to the child DIV with the offset you want. It's simple and

div hover background-color change?

匿名 (未验证) 提交于 2019-12-03 02:45:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: How can I make it act as if a line of div is anchor so when I hover on it it returns to red CSS .e { width:90px; border-right:1px solid #222; text-align:center; float:left; padding-left:2px; cursor:pointer; } .f .e { background-color:#F9EDBE; } HTML <div> <div class="e" >Company</div> <div class="e">Target</div> <div class="e" style="border-right:0px;">Person</div> </div> <div class="f"> <div class="e">Company</div> <div class="e">Target</div> <div class="e" style="border-right:0px;">Person</div> </div> <div> <div class="e">Company</div>

How to position a div in bottom right corner of a browser?

匿名 (未验证) 提交于 2019-12-03 02:45:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I am trying to place my div with some notes in the bottom right position of the screen which will be displayed all time. I used following css for it: #foo { position: fixed; bottom: 0; right: 0; } It works fine with Chrome 3 and Firefox 3.6 but IE8 sucks... what can be a suitable solution for it? 回答1: This snippet works in IE7 at least <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Test</title> <style> #foo { position: fixed; bottom: 0; right: 0; } </style> </head> <body> <div id="foo">Hello World</div> </body> </html> 回答2: I

CSS hover image show div

匿名 (未验证) 提交于 2019-12-03 02:42:02
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I have tried to add + but div .shopbar_image_over doesn't show. .shopbar_image_container img { height: 190px; width: 190px; cursor: pointer; } .shopbar_image_over { display: none; height: 190px; width: 190px; opacity: 0.2; background: #444; position: absolute; cursor: pointer; } .shopbar_image_container img:hover + .shopbar_image_over { display: block; } <div class="shopbar_image_container"> <div class="shopbar_image_over"></div> <img src="img/t.jpg" /> </div> 回答1: Adjacent Sibling Selector ( + ) works on the adjacent next sibling in the DOM

div get shrinked when using postion: fixed

匿名 (未验证) 提交于 2019-12-03 02:38:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: I'm having a <div> and I want to make it's position: fixed . I've added CSS rule position:fixed but after adding that the <div> gets shrink. Please guide me into this. my html code is this <div layout="row" style="background-color:#1CA5EA; position:fixed"> <div offset="25" flex="30" class="input-container"> <md-input-container flex > <label style="color:white">Search</label> <input ng-model="search" style="border-bottom:2px solid white;color:white;"> </md-input-container> </div> <div flex="10" class="input-container"> <button class="primary

How to use JavaScript to change div backgroundColor

匿名 (未验证) 提交于 2019-12-03 02:38:01
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试): 问题: The HTML below: some title here some content here some title here some content here some title here some content here When mouseover the content of div then it's backgroundColor and the h2 (inside this div) backgroundColor change (just like the CSS :hover) I know this can use CSS (:hover) to do this in modern browser but IE6 does't work. How to use JavaScript (not jQuery or other JS framework) to do this? Edit:how to change the h2 backgroundColor too 回答1: var div = document.getElementById( 'div_id' ); div.onmouseover = function() { this