css3

问题 Here is a jQuery slide function I have applied to a div on hover in order to slide a button down. It works fine except that now everytime someone moves in and out of it, it keeps bobbing up and down. I figured if I put a one or two second delay timer on it it would make more sense. How would I modify the function to run the slide down only if the user is on the div for over a second or two? <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script> <script

问题 I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events. Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off. I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option. 回答1: Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.

问题 I'm using word-break: break-all; and want to know how I can have the browser automatically insert the hyphens, as demonstrated in an MDN example. div { width: 80px; height: 80px; display: block; overflow: hidden; border: 1px solid red; word-break: break-all; hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; } <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> Such

问题 I'm experimenting with the ::selection pseudo-element in CSS3. In Firefox it works and looks great. My site has a dark navy blue background. I set the selection so that it looks like this in FF. But in chrome the same test looks like this. It seems that chrome interprets the selection as semi transparent the resultant color is nasty. Does anyone know if it's possible to get chrome to behave the same as Firefox. For reference here is my css: p::-moz-selection { background:#FFFF7D; color:

问题 I have my site HEAVILY modified via @media queries to display very slimdown'd on mobile phones. However, my users are asking for the desktop version of the site (available via a link). To go a step further, the desktop site itself also gets modified by @media queries depending on resolution. I was thinking of picking one 'desktop' resolution, say 1440x900 and forcing the mobile phone to display at that resolution? Is this possible, maybe through JavaScript? Alternatively, can these @media

问题 I have jquery accorion id #accordion and some of the content inside header class name .simpleColor . Now I want to give a calculated margin to .simpleColor. In pseudo...it looks something like this, .simpleClass { margin-left: ((#accordion.width/2) - (.simpleColor.width/2)); } I am open to use any other technology such as javascript to achieve this if it is possible. 回答1: There's a CSS function called calc that is starting to get pretty good support. The syntax works as followed: width: calc

问题 When I use bootstrap, it removes the background color from everthing when I try to print my page. Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap. I've found out that bootstrap uses @media print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well. theme-united.css @media print *, *:before, *:after { background: rgba(0, 0, 0, 0) !important; color:

问题 When I use bootstrap, it removes the background color from everthing when I try to print my page. Almost everything on my website is using bootstrap classes so I want to avoid a lot of manual CSS outside bootstrap. I've found out that bootstrap uses @media print to remove the background color. I'm using a bootstrap theme as well (theme united) which is removing the background color as well. theme-united.css @media print *, *:before, *:after { background: rgba(0, 0, 0, 0) !important; color:

问题 I'm trying to achieve something similar to this picture: I have an image (as part of a slideshow) wrapped in a div, and with :before and :after pseudo-elements, I display two controls to move onto the next (>>) or previous (<<) images of the slideshow. So far, I have this: div { position: relative; } div:before { display:block; height: 100%; content: "stuff"; position:absolute; top: 0; left: 0; text-align: center; } I can't, however, center the content of the pseudo-elements, the text appears

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing tree plugins for bootstrap or jquery-ui bootstrap. For reference or for people confused about this question, I am