Okay, so I have an image for a background that has 1px of a blur filter in the CSS.
That works.
Then, I added a CSS :hover selector to a new CSS rule that changes the blur filter to 0.
When I hover over it on the browser, however, it doesn't change the blur at all! (I went into Google Chrome Inspect Element and used the handy feature of forcing the :hover selector, and then it worked. So I know it's not the CSS that's buggy.)
How can I get this to work? It's a blur filter on a div in a header. Any ideas?
<header>
<div id="bgimage"></div>
<nav>
Home
<span class="divider">-</span>
Types of Cake
</nav>
<h1>Cakes</h1>
</header>
body header {
width:100%;
text-align:center;
box-shadow:0 4px 4px 4px rgba(0,0,0,0.2);
z-index:4;
position:relative;
background-color:linear-gradient(CornFlowerBlue,RoyalBlue);
}
body header div#bgimage {
background-attachment:fixed;
background-position:center;
background-size:cover;
background-image:url(hydrangea-cakes-2.jpg);
filter:blur(1px);
position:absolute;
width:100%;
height:100%;
}
The important parts of the HTML are the header and the div id="bgimage"
You haven't already added the :hover pseudo-class.
#bgimage:hover {
/* the styles you want to display on hover */
}
You did not add the :hover part of the CSS but it works for me if I just add this to the CSS:
#bgimage:hover {
filter: none;
}
Related
I can't seem to make a CSS listen to a :hover.
I have the following CSS:
<style>
.hidescroll
{
}
.hidescroll :hover
{
overflow-x: auto;
}
</style>
And html:
<div class="hidescroll" style="width:100%; height:100px; background-color:green; overflow-y:hidden; overflow-x:hidden;">
<div style="width:300%; height:100px; background-color:red; ">abc</div>
</div>
I would expect the scrollbar to appear when I hover over the div. It doesn't. Why? (I tried to add div before :hover but that didn't help either.)
Inline styles have a higher specificity. You either have to say !important on the hover declaration or move your styles away from inline. I'd recommend the latter.
style="..." on the <div class="hidescroll" takes precedence over the separate css rule in the <style> block.
Since you already have a css rule for hidescroll, put those styles in there instead of putting them inline.
<style>
.hidescroll
{
width:100%;
height:100px;
background-color:green;
overflow-y:hidden;
overflow-x:hidden;
}
.hidescroll:hover
{
overflow-x: auto;
}
</style>
<div class="hidescroll">
<div style="width:300%; height:100px; background-color:red;">abc</div>
</div>
It would be better to also put the styles for the inner div into a style rule.
Note — !important was meant to be used the user agents; used by the end-user to be able to override site styles, for example I use it to in my browser (with the Stylebot plugin) to fix font-size and contrast problems to make sites readable)
On the main menu, if a menu link is active, there is a border on the bottom. It works fine. I have the following CSS:
.active {
text-decoration: none;
border-bottom: 4px solid #888;
}
Currently the border-bottom is as wide as the text inside the list item. But I would like to make it much narrower. Is that possible?
Here is the HTML
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
</ul>
Try using the pseudo-element :after to achieve that, as I don't think it's possible to make the border narrower than the element's width.
Check this fiddle: http://jsfiddle.net/6QfNs/
A border can't be narrower than the element it is set on. So you can't achieve your aim with a border.
BUT
You can use a pseudo element, set the border on it and give it the desired width :
DEMO
CSS :
.active:after {
content:'';
display:block;
width:20px;
border-bottom: 4px solid #888;
}
The technique of using pseudo-elements is very familar and well-known in solving the problems of this kind. However I would like to introduce another way using linear-gradient background, just a share for every one:
/* span is your menu item here */
span {
font-size:20px;
padding:4px;
cursor:pointer;
}
span:hover {
background:linear-gradient(red,red) no-repeat;
background-size:60% 4px;
background-position:center bottom;
}
Demo.
Alright IE8 gurus (does such a thing exist?). I need some assistance in fixing an issue that is a result of using an :after pseudo selector. It's pretty straight forward - just trying to add a border (underline) after a span tag on hover. No, the easy solution isn't just using the text-decoration property because the element inside the span tag is an image (and some other reasons).
Here's the HTML:
<div class="cta">
Hover over me
</div>
And here's the CSS:
.cta { position:relative; z-index:1; display:inline-block; }
.cta:after { position:absolute; z-index:1; left:0px; right:0px; bottom:0px; content:''; border-bottom:1px solid transparent; }
.cta:hover:after { border-color:rgba(0,136,204,.6); }
And for those of you really interested in helping and want to play around with it, here's the fiddle.
Why on earth does that not work on IE8? Works on all other browsers. I've even tried just removing all of the hover nonsense, but I still can't get the border to appear. I've also tried adding a display:block and width:100% to the .cta div per some things I came across on the Internet. No dice.
Any ideas?
IE8 and lower do not support rgba, so try adding a fallback using rgb: DEMO
.cta:hover:after
{
border-bottom:1px solid rgb(0,136,204);
border-bottom:1px solid rgba(0,136,204,.6);
}
Source: http://css-tricks.com/rgba-browser-support/
I have done box around text. Now I want to be hover and change the color of the box
background. I am not able to change that when mouse hover. I have also attached the
image with this so you can have idea about. I have done box around text. Now I want to
be hover and change the color of the box background. I am not able to change that
when mouse hover. I have also attached the image with this so you can have idea
about.please check the image and found the social media box , when I hover the mouse
the hover color is not changing.
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
</style>
<div class="ex"><span class="iconfacebook2" aria-hidden="true" data-icon="">
</span></div>
*edited to make the image appear
You can use the :hover selector:
http://www.w3schools.com/cssref/sel_hover.asp
But if you are using images, you can apply CSS Image Sprites:
http://www.w3schools.com/css/css_image_sprites.asp
By the way, if you are developing a website, maybe CSS Image Sprites are a good choice to boost the performance of the website (because it uses only 1 native image for multiple image interactions).
;)
<style>
div.ex
{
width:20px;
height:20px;
padding:5px;
border:1px solid #D8D8D8;
margin:0px;
background-color:#3b5998;
}
div.ex:hover {
background-color:#000;
}
</style>
Create a hover element by taking the same css class div.ex and adding :hover
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="center-box">
<ul>
<li id="fim"><img src="images/1.png" /></li>
<li id="sim"><img src="images/2.png" /></li>
<li id="tim"><img src="images/3.png" /></li>
<li id="fom"><img src="images/4.png" /></li>
</ul>
</div>
</body>
</html>
CSS Code
html {
height:100%;
}
body {
background:black;
border:1px solid white;
margin:0;
padding:0;
position:absolute;
height:100%;
width:100%;
}
#center-box {
border:4px solid white;
color:white;
position:absolute;
width:250px;
height:250px;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;
background:grey;
}
#center-box ul {
list-style-type:none;
margin:5px;
padding:18px;
}
#center-box ul li {
display:inline;
}
#center-box ul li:hover {
background-color:blue;
}
It only has a box in the middle of a page, and an inline list with images that are transparent (PNG). I want to make a transparent image change its background color by hovering on it, but it acts as the image is not transparent. How would you suggest to fix this?
Actually there is an alpha transparency problem in IE6 with respect to the images with the PNG format. Since the support for the alpha channel was missing for these browsers there are some tags that can support your code.
If you want it through CSS
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
If you want it through JavaScript
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
You can check the further pitfalls which these will have here
I think you should use "inline-block" display for your li element in your CSS :
#center-box ul li {
display: inline-block;
}
That way, the background will not only be applied on the text part of the area, but on the whole image.
Hope it helps!
Transparent PNGs work well for me with background behind them as long as the browser is IE 7+. I suspect your PNGs may not be transparent.
For < IE7:
These browsers do not support PNG alpha transparency.
However PNG-8 images with alpha transparency are rendered with full transparency.
But truecolor PNG's alpha transparency appear grey when they get rendered.
So use PNG-8 images when possible and you're done. Otherwise you've to drop browser support or use workarounds like Shiv mentioned in his answer.
Just out of curiosity ... have you tested this in older versions of IE?
The :hover pseudo class does not apply to all elements and inline-block can only be applied to inline elements (list items are block level) in IE7 and none in IE6.
I take it that you'll be using <a> inside your <li>; this should fix both issues (over-and-above the transparency issue of course).