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/
Related
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;
}
I tried all ways to change color of <hr/>:
hr{
border-color: yellow;
background-color: yellow;
color: yellow;
}
but it appears like this in both Chrome and FF:
How can I change its color to pure yellow?
Give hr a style with:
hr{
border:0;
margin:0;
width:100%;
height:2px;
background:yellow;
}
or
border:1px solid yellow;
JsFiddle
You need to get rid of the border or change the border's properties for it work.
From #Darko Z in the comments:
In many browsers the default style for HR is to add some sort of shading to the border so this comes out as dirty #whateverColourYouWant. To get rid of it, setting border explicitly (and not just border-color) is necessary.
To change the color of your horizontal rule, in your <hr/> tag, type the html attribute color="". Then you can go ahead giving it the desired color.
I’m trying to create a button toggle using the twitter bootstrap.
What I’m looking to do is add a tick image at the top right of a button when the class active is added.
Here is an example of the source
http://jsfiddle.net/4GC9R/
My button css looks like
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
}
Sorry if this is a stupid question I’ve tried a few ways but I’m far from a css expert.
Thanks in Advance
To add the checkmark you could use the :after pseudo element and for an image you could then further use content: url('image_path') or background-image: url('image_path').
Also, your class selectors should be adjusted. Maybe something in this direction:
.mybtn {
width:150px;
height:150px;
margin:5px;
background:#FBDFDA;
border:none;
}
.mybtn.active {
background:#CFCFCF;
border:none;
position:relative;
}
.mybtn.active:after {
content: '\2713';
position:absolute;
top:0;
right:0;
}
DEMO
P.S. if you meant tick - as in the animal (e.g. Ixodes), that is also possible via content or the background property of the :after pseudo element (DEMO) ;-)
When the class name '.active' is added to the button with class '.mybtn', then the selector of the button will not be '.mybtn .active', but '.mybtn.active'.
Hope this helps.
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
I find this a pain. I am trying to get CSS to use an image when the < hr /> tag is used.
I am currently using:
hr
{
display:block;
border:none;
height:10px;
background-image:url('img/ruler.gif');
}
However, I always get a border around the image. As you can see, the border:none does nothing.
I know there are alternative ways such as using div. But is it possible through using the hr tag only?
The main users will be using IE6, so need a IE6 compatable solution please.
Thanks
hr {
display:block;
border:0px;
height:10px;
background-image:url('img.gif');
}
Update border:none; to border:0;