I'm trying to make a simple hover effect with my submit button
CSS
#submit1 a:hover{
background-position: -1px -56px ;
background-image:url(sprites.png);
}
#submit1{
background-position: -140px -58px ;
width: 112px;
height: 33px;
background-image:url(sprites.png);
}
HTML
<div id="submit1">
<a href="#">
</a>
</div>
Turn #submit1 a:hover into #submit1:hover
#submit1:hover {
background-position: -1px -56px ;
background-image:url(sprites.png);
}
#submit1 {
background-position: -140px -58px ;
width: 112px;
height: 33px;
background-image:url(sprites.png);
}
You can see the results here: http://jsfiddle.net/eu3zc/
EDIT:
With regards to your comment, when you are editing multiple elements adding a comma.
Example:
#submit1:hover, a:hover {
color: #000;
}
#submit1, a {
color: #FFF;
}
#submit1, a this means I wan't my CSS code to apply to #submit1 and a at all times.
#submit1:hover, a:hover this means I wan't my CSS code to apply to #submit1 and a but only when I hover.
You can add more elements by adding more commas to apply the same CSS code to all of them.
Related
I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/
You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle
You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ
I've designed some hyperlinks with CSS to add a background image (to make it look like a button) using the following code:
<a class="btnImg" id="btnImgConfig" href="#"></a>
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
As you can see, I'm trying to create a darker effect on the image on hover. This is the desired effect:
However, currently the effect is this:
I know I could easily do this by replacing the image on hover with a darker version of it. But somehow I feel this shouldn't be the way to do it in this case. Besides what is mentioned above, I've also tried rgba{..} on hover. This however had no effect at all.
Here's a JSFiddle of the code above.
You could alternatively use a pseudo-element which then overlays. This will give you the effect you require.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
position: relative;
}
.btnImg:hover::after {
background-color: #878787;
opacity: 0.4;
position: absolute;
content: '';
width: 100%;
height: 100%;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
Try this:
Change opacity: .2;to -webkit-filter: brightness(0.5);
Easiest approach would be to have the text and tools over a transparent background, and change the background color on hover. No opacity or other such. To make it work without "!important" define the background with background-image, and the color, position, and repeat likewise separately. Or, define the background-color with important (it's ok, it's prescriptive).
Put the image's initial opacity to .2, then put it to full opacity on hover.
.btnImg {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid #e4e4e4;
opacity: .2;
}
.btnImg:hover {
opacity: 1;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
}
<a class="btnImg" id="btnImgConfig" href="#"></a>
What you show in the desired result is not really possible in the current setup..
If you are able to use a png24 file with a transparent background, you can accomplish this more easily, by just changing the background color.
#btnImgConfig {
background-image: url("https://cdn4.iconfinder.com/data/icons/ios7-line/512/Tools.png");
background-size:100%;
background-color: #eee;
}
.btnImg {
width:100px;
height:100px;
display:inline-block;
border:1px solid #e4e4e4;
}
#btnImgConfig.btnImg:hover {
background-color: #ddd;
}
See https://jsfiddle.net/zgurL5t9/ for an example.
Your image has a default background color which is causing this issue. try using a transparent PNG image instead along with the background-color property and you should be good to go.
I have updated your Fiddle link slightly for your reference:
JSfiddle
#btnImgConfig {
background: url("http://www.jar2exe.com/sites/default/files/images/pics/config-100.png") no-repeat scroll 0 0 #f8f8f8;
}
#btnImgConfig:hover{
background-color: #878787;
}
Note: I have used a different image of same size to make it easier for you.
Assuming you use a transparent png here.
You could create a different element within your a href.
<a id="btnImgConfig" href="#"><span class="btnImg"></span></a>
Keep the image on the link, but the background-color on the new element.
This way the opacity doesn't change the original background-img
CSS could be something like this.
.btnImg {
width:100px;
height:100px;
border:1px solid #e4e4e4;
position: absolute;
}
.btnImg:hover {
opacity: .2;
background-color: #878787;
}
#btnImgConfig {
background: url("http://www.icecub.nl/images/config.png") no-repeat scroll 0 0 transparent;
width:100px;
height:100px;
display: block;
}
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet
Here is my code, which works perfectly in all but ie! The active simply does not fire
a.Button span {
background: transparent url('images/form_sprite.png') no-repeat 0 0;
display: block;
height:45px;
line-height: 30px;
padding: 7px 0 5px 20px;
color: #fff;
background-position: 0 -44px;
}
a.Button {
background: transparent url('images/form_sprite.png') no-repeat top right;
display: block;
float: left;
height: 45px;
margin-right: 6px;
padding-right: 27px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
a.Button:hover span {
background-position: 0 -136px;
}
a.Button:hover {
background-position: right -90px;
}
a.Button:active span {
background-position: 0 -225px;
}
a.Button:active {
background-position: right -181px;
}
This is the html:
<div class="clearbutton"> <a class="Button" href="#"><span>Button text</span></a> </div>
Any ideas please?
try changing a.Button:active to a.Button span:active in your css. That seems to be firing the :active css and still works in chrome for me.
Yep, the :active psuedo-class only fires in IE when the user is clicking directly on that object. In this case, the link. If you're clicking on a child object (the span), the link's active event won't fire.
You can, as Aninemity said, apply the style to span:active (the proper way to do this). But in IE6/7, :active fires only for links. If you need IE6/7 support, you'll have to find some way to get rid of the span.
The rollover uses a single image for both the regular and hover states. The buttons display fine in both Firefox and Chrome, but the rollover does not work in Firefox.
Here's the HTML, which uses a list for multiple buttons (just a single instance of a button is shown here):
<div id="buttons">
<ul class="stencil_buttons">
<li>
<button type="submit" id='addField'>
<a class="global_button" href=""><span>Button Text</span></a>
</button>
</li>
</ul>
</div>
Here's the CSS:
a.global_button span {
background: transparent url('../images/button_left.png') no-repeat 0 0;
display: block;
line-height: 22px;
padding: 3px 0 5px 18px;
color: #fff;
}
a.global_button {
background: transparent url('../images/button_right.png') no-repeat top right;
display: block;
float: left;
height: 30px;
margin-right: 6px;
padding-right: 20px;
text-decoration: none;
font-size: 14px;
}
a.global_button:hover span {
background-position: 0 -30px; color: #fff;
}
a.global_button:hover {
background-position: right -30px;
}
Thanks in advance for your help.
Try button:hover a.global_button span and button:hover a.global_button instead of the corresponding selectors above. While the selectors in the question above will work in FF when the surrounding element is not a button, they do not work when it is; My guess would be that the hover state stops at the button and does not filter down to child elements in FF.