Alright, so when I use this code and hover over the object, the transition works. But if I take my mouse OFF of the object, the transition doesn't happen. I've seen other posts talk about this but the solutions don't work.
Here's my code in CSS:
.square{
margin-top: 20px;
height: 100px;
width: 400px;
border-radius: 20px;
background:#3d3434;
outline: none;
transition: 0.25s;
}
.square:hover{
outline: 3px solid #21ff46;
}
Also, I'm relatively new to coding and CSS.
You code works properly. The reason why you see no animation on mouseleave is that after hover pseudostate ends, there's no outline at all, and browser doesn't know to what position he has to shrink the outline. Also it doesn't understand what color it should preserve while shrinking, without hover state there's no color defined.
So, the solution is to add this line to your .square
outline: 0 solid #21ff46;
Leave the rest as it is, your problem is solved.
Related
I'm trying to make a custom tooltip implementation in CSS, which is working pretty decently, but I'm running into a problem. Currently, hovering over the tooltip still keeps the tooltip opened, even though I'm not hovering over the original element itself.
Of course I've tried something like ::before:hover {display:none;}, but that doesn't work because pseudo-elements don't get pseudo-classes applied to them.
My next thought was to simply make the tooltip not "take up" any space. Using negative margin-bottom allows other stuff to take up space in an element as if the element is not there. However, the :hover pseudo-class apparently still applies then.
Here's a demo of what I'd like to do. I'd like to have the tooltip of the following demo not persist any hovering state. Note that moving the tooltip-text higher above the element is not a working solution, because moving the cursor upwards faster than a snail's pace will cause some pixels to be skipped, which means the tooltip 'catches' the cursor and persists the :hover on the element.
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
top: -2px;
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
As you can see, if you move your cursor over the div, the tooltip will appear, and if you slowly move your cursor up, the tooltip will disappear. If you move your cursor upwards slightly faster, however, it'll skip the 1-pixel gap, and keep the cursor hovering over the div.
Now I'm looking for some styles to apply to [data-tooltip]::before so that the cursor's hover events are not triggered on it (or at least, not at the location you see the tooltip; if I can hide it somewhere at [-1000, -1000] that's fine as well)
So basically, my question is, is it possible to apply css to an element so that :hover does not apply to (part of) an element? I'd love to hear ideas or suggestions.
Not sure if that's what you're looking for, but regarding the first question (red div, blue on hover), you could shorten the divs height and use border-bottom for making up for the lost height:
div {
width: 100px;
height: 50px; /* instead of 100px */
background: red;
margin-bottom: -50px;
position: relative;
z-index: 1;
border-bottom: 50px solid red; /* adds 50px to divs apparent height, but ignored at hover */
}
After looking around the internet for a while I finally found a solution that works flawlessly. I didn't really know about this before, but apparently there's a pointer-events style that does exactly what I want. Its accepted values outside of SVG are auto and none, but luckily the latter prevents all hover-events from triggering on the ::before pseudo-element.
Here's a demo:
[data-tooltip] {
position: relative;
cursor: default;
}
[data-tooltip]:hover::before {
/*** this style prevents persistence of the tooltip when hovering over it ***/
pointer-events: none;
/* the rest is just the styles used in the question */
content: attr(data-tooltip);
position: absolute;
top: 0; /* changed from -2px to 0 so the effect is more clearly shown */
transform: translateY(-100%);
background: white;
border: 1px solid black;
}
<p>Spacer text</p>
<div data-tooltip="Example tooltip">Hover over me for a tooltip text</div>
I have a link here to https://codepen.io/PhysicsKid/pen/gQXPPZ.
svg {
position: fixed;
bottom: 0;
right: 0;
}
This is they styling that I have on the SVG. I have a hover state for the submit button also.
button:hover {
color: white;
background-color: dodgerblue;
border: 3px solid white;
}
When I comment out the SVG the form and the hover state both work. I am not sure what is causing the problem. I think the SVG might be covering the other elements so that they can not be selected but if that is the case I do not know how to fix it. Any help would be greatly appreciated.
Add pointer-events: none; to the css definition for the SVG. This will keep it from blocking the mouse events from the elements placed below it (which is the root of your issue). See the fixed example here
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
I am working with a menu tutorial found here and everything works fine except i would like border corners. I've tried setting them everywhere possible but nothing works. any ideas on where it should work?
I've tried:
.cbp-tm-show .cbp-tm-submenu{
border-radius: 5px;
}
also:
.cbp-tm-show-below .cbp-tm-submenu{ border-radius: 5px; }
every possible place i've tried it and haven't seen any effect.. :(
As #Dean Stalker mentions, you need to set a background color on the submenu's ul element. You also need to set padding or a border width > 0 to that same ul in order for border-radius to have something to "round off".
The below assumes the background color of the submenus is white, like in the demo you linked to:
.cbp-tm-submenu {
border: 5px solid #fff;
background-color: #fff;
border-radius: 5px;
}
#Andres Try setting a background color on the ul element (.cbp-tm-show .cbp-tm-submenu). At the moment the background color is set to transparent (in the demo).
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.