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
Related
below is my html and css it works perfectly fine
current behavior is when the button is pressed background color is green as expected,
after it is released background color is yellow.
but here i want the background color to be blue (normal state).
i cannot remove :focus because on keyboard tab that should work as expected.
what more selectors i have to use to change the background color of the button to blue after released the mouse..
NOTE:- i don't want Jquery or javascript solution i am expecting only css changes.
button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}
<button>hello</button>
One idea is to consider an extra wrapper that will get the click instead of the button. The trick is to create a transparent layer above using pseudo element and you will still be able to have the focus using the keyboard.
If you have any click handler attached to the button you need to move it the span instead
button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}
span {
display:inline-block;
position:relative;
}
span:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
<span><button>hello</button></span>
When hovering cursor over the link, it's like it jumps down or adds extra pixel on the bottom. Looks like a common problem. I've tried solutions I found on this site, but none seem to work.
This is js fiddle
https://jsfiddle.net/srhjv284/
This is html
<div class="wrap">
Item 1 text
Some Other Text
Last Item
</div>
And this is css
.wrap {width:200px;}
.item {
display:block;
margin:2px 0;
padding:4px 8px;
background-color:#fff;
font-family:arial;
font-size:15px;
color:#ba050a;
border:1px solid #ba050a;
text-decoration:none;
transition:0.4s;
}
.item:hover {
color:#fff;
background-color:#ba050a;
}
This is just happening because you have the same border colour and the background colour on hover.
So when you hover, 1px border merge with background and it feels like that space increased.
Please change the border colour or background colour on hover and you will see the difference.
I have two divs, one after another but float side by side, one is of a button img type thing and the other is some words associated with the what the button is. They are about 20px apart on screen.
What I want to happen is that when you hover over the button it changes and also changes the text, this I can do using the "+" operator in the css file, however I also want when you hover the text for the button to change, this isn't possible with the + as the text div is after the one with the img.
Below is my html and css, is there any simple way to do this? I don't want to really be using javascript and such to do it so if it requires major things I won't bother.
I just realized that I changed a few things before asking the question and it doesn't actually work with the + either
I have added a fiddle here: http://jsfiddle.net/LzLyK/1/
Basically when you hover the square it turns green, when you hover the text it turns green, what I want is to hover the square and square and test turns green and if you hover the text the square and text turns green
HTML
<div class="services-section-holder">
<div class="services-section-img"></div>
<div class="services-section-title"><p>Exhibition</p></div>
</div>
CSS
.services-section-holder{
position:relative;
width:270px;
height:70px;
margin-bottom:5px;
}
.services-section-img{
position:relative;
width:80px;
height:75px;
float:left;
background:url(../images/greycircle.jpg);
}
.services-section-title{
position:relative;
float:left;
height:75px;
margin: 0 auto;
display: table;
padding-left:20px;
}
.services-section-title a {
text-decoration:none;
}
.services-section-title a {
color:#000;
}
.services-section-title a:hover {
color:#906;
}
.services-section-img:hover {
background:url(../images/greycirclehover.jpg);
}
.services-section-img:hover + .services-section-title a{
color:#906;
}
The issue is that you're trying to ascend then descend the DOM with CSS which cannot work, CSS selectors can only work on identifying siblings or descendants.
Either wrap the initial a in its child div so both your divs are at the same level, or move class="services-section-img" from the div to its parent a
Demo Fiddle
Example fiddle of working solution/logic vs your current code
Again, CSS cannot ascend the DOM so any adjacency selectors only work by identifying elements following the initially specified element.
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'm trying to add two hover animations to each image in my photo galleries. Basically, when you hover over an image, I'd like for there to be a text that shows up in a black overlay and when you hover over that text, it becomes underlined. Essentially, I'd like it to look something like this: http://i.stack.imgur.com/vAWpd.jpg
I know I have to create a hover element but the fact that I have two create two animations within each other really confuses me. Could anyone give me a few words of guidance?
Thanks!
Rowan
You mean like this?
HTML:
<div id = 'pie' src = 'http://www.pieisgood.org/images/slice.jpg'><p id="pText" style='left:50px; top:50px; position:absolute;'>Text</p></div>
CSS:
#pie
{
width:500px;
height:265px;
background-image:url('http://www.pieisgood.org/images/slice.jpg');
}
#pText
{
display:none;
transform:rotate(60deg);
border:1px solid;
}
#pText:hover
{
text-decoration:underline;
}
#pie:hover > #pText
{
display:block;
}
The text is hidden until you hover over the div with an ID of pie. The > means it will effect the element after it if it is a child of pie. It changes display:none on the paragraph to display:block while you're hovering over the image. #pText:hover means when you hover over the paragraph, text-decoration:underline will underline the text while you're hovering over the paragraph.