css

Cut a CSS transition short?

由 一世执手 提交于 2021-02-08 23:40:47
问题 I'm applying a CSS transition to an element. target.style.transition = "color 10000ms ease"; target.style.color = "red"; Under certain circumstances, I want the end state of this transition to be reached immediately, without waiting for the transition to finish. If I try target.style.transition = "color 0ms"; target.style.color = "red"; the current transition just continues. Doing target.style.transition = "color 0ms"; target.style.color = "blue"; sets it to 'blue' immediately, while target

how do I use the CSS hover on only SOME cells in a table?

由 早过忘川 提交于 2021-02-08 23:38:37
问题 How do I use the CSS hover on only SOME cells in a table? Can I turn it off on those that I don't want it applied to? I'm using this: td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-style:dotted; border-right-style:dotted; } But I need it to only apply to certain cells 回答1: Instead of specifying your style for all cells you can create a class and only apply that to the cells you want the style on. Update your css to this: .myclass:hover { border-style

Why doesn't flex direction column with align-items=center center image properly

由 半腔热情 提交于 2021-02-08 23:37:28
问题 I stumbled upon an issue with image centering within a flexbox with direction:column . Imagine you have two elements within a flexbox, where the first one contains an image: <div class="container"> <div class="image-container"> <img class="img" src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg"> </div> <div class="another-flex-child"> Random content here </div> </div> .container { height: 300px; background-color: green; display: flex; flex-direction: column;

How to slant dashed border in CSS?

由 独自空忆成欢 提交于 2021-02-08 23:37:18
问题 I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner How can I achieve that effect with CSS borders? 回答1: You may have to play with the colors a little. .enveloppe { padding: 1em; border: 16px solid transparent; border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em, #b67 0, #b67 3em, transparent 0, transparent 4em); max-width: 20em; } <div class="enveloppe">Lorem Ipsum</div> 回答2: If you want to

How to slant dashed border in CSS?

由 大城市里の小女人 提交于 2021-02-08 23:37:07
问题 I am trying to design an envelope using CSS for a Mail App. My client wants dashed borders in this manner How can I achieve that effect with CSS borders? 回答1: You may have to play with the colors a little. .enveloppe { padding: 1em; border: 16px solid transparent; border-image: 16 repeating-linear-gradient(45deg, red 0, red 1em, transparent 0, transparent 2em, #b67 0, #b67 3em, transparent 0, transparent 4em); max-width: 20em; } <div class="enveloppe">Lorem Ipsum</div> 回答2: If you want to

how do I use the CSS hover on only SOME cells in a table?

由 孤街醉人 提交于 2021-02-08 23:37:04
问题 How do I use the CSS hover on only SOME cells in a table? Can I turn it off on those that I don't want it applied to? I'm using this: td:hover { border-style:dotted; border-color:#F60; border-width:medium; border-left-style:dotted; border-right-style:dotted; } But I need it to only apply to certain cells 回答1: Instead of specifying your style for all cells you can create a class and only apply that to the cells you want the style on. Update your css to this: .myclass:hover { border-style

change image source using javascript onclick with effect

由 爷，独闯天下 提交于 2021-02-08 21:51:06
问题 I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect. HOW?? Below is the code i'm using but its only for 2 images how do i use for multiple images: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Untitled Document</title> <script src="jquery-1.5.1.js"

Padding changes width inside table

由 天涯浪子 提交于 2021-02-08 19:45:09
问题 I have a table that has fixed width, and inside the table I need to have some inputs(text) that has the same width of the table, but I don't want the text of the inputs to be at left:0 , I want them to have some padding from the left. But when I put the padding to those inputs the width changes to more than 100% . Here the HTML: <table cellspacing="25"> <tr> <td><input type="text" placeholder="lalala"></td> </tr> </table> And this is the CSS. table { background-color: red; width: 300px; }

Can't get rid of white space at bottom of my mobile version of website

由 谁都会走 提交于 2021-02-08 19:43:37
问题 I've tried looking up this topic on here, none of the answers answered my specific problem. The problem is this: Every time I go to the mobile version of my site, I scroll down the first time to the very bottom of my page and it's fine, my background image fills the entire screen. But then I scroll back up and scroll back down and there's suddenly a white bar below my footer. I've tried numerous things in CSS and HTML and nothing has worked so far. Again, this problem does not happen in my

Can't get rid of white space at bottom of my mobile version of website

由 江枫思渺然 提交于 2021-02-08 19:42:57
问题 I've tried looking up this topic on here, none of the answers answered my specific problem. The problem is this: Every time I go to the mobile version of my site, I scroll down the first time to the very bottom of my page and it's fine, my background image fills the entire screen. But then I scroll back up and scroll back down and there's suddenly a white bar below my footer. I've tried numerous things in CSS and HTML and nothing has worked so far. Again, this problem does not happen in my
订阅 css