I am trying to find a way to change the background image when hovering over my checkbox span (I had to build it this way due to firefox problems).
Whenever I add a :hover state it just ignores it?
I have created a replica of my current code: https://jsfiddle.net/vf21xxba/
Each of the divs have will have a different icon by id and the images will be different on hover too.
label.checkbox input[type="checkbox"] { display:none; }
label.checkbox span{ position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: 50%; display:inline-block; border-radius: 100px; transition: all 0.5s; cursor: pointer; width: 75px; height: 75px; background:#262626;
background-position: center;
background-repeat: no-repeat;
background-size: 50%; }
label.checkbox span#pa { background-image: url('../img/icons/party-animal.png'); }
label.checkbox :checked + span#pa { background-color: #ea2e49; }
<label class="checkbox"><input type="checkbox" value=".pa" id="pa" class="initPa"><span id="pa"></span></label>
So like the 'checked' sate i need to add a hover sate for each span with an ID with a different background image.
Just leave the + out
https://jsfiddle.net/vf21xxba/3/
label.checkbox :checked + span#pa, label.checkbox:hover span#pa {
background-color: #ea2e49;
background-image: url('http://icons.iconarchive.com/icons/zerode/plump/128/Search-icon.png');
}
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 26 days ago.
I was trying to practice "background-image" but it didn't work correctly.
.box{
border: 5px solid rgb(255, 20, 59);
background-color: #ddd;
height: 100px;
width: 200px;
display: inline-block;
margin: 10px;
padding: 14px;
box-sizing: border-box;
cursor: pointer;
transition-duration: 0.5s;
}
.box:hover{
opacity: 60%;
transform: 2s;
}
#box1{
background-image: url(pre-left.png);
background-size: cover;
}
#box3{
background-image: url(pre-right.png);
background-size: cover;
}
#box2{
text-align: center;
position: relative;
top: -52px;
font-weight: bold;
font-size: 43px;
}
#box2:hover + #box3{
background-image: url(right.png);
transition-duration: 1s;
}
#box2:hover + #box1{
background-image: url(left.png);
transition-duration: 1s;
}
so on I was trying to change box1 and box3 background when box 2 being hovered but what happens is changing the background of only box3 not 1
The issue with your code is that the #box2:hover + #box1 selector is not correct. The + selector is used to select an element that is immediately preceded by the former element. In this case, #box1 is not immediately preceded by #box2, so this selector will not work (I guess that since it works well with #box3, so it's #box3 that comes immediately after #box2.
To solve the problems you can use JQuery, or vanilla JS, by attaching an event listner to #box2 element, and change the #box1 and #box3 background image when mouse enters #box2.
Here is an example of how you can do it using vanilla JavaScript:
// Select the elements
var box1 = document.querySelector("#box1");
var box2 = document.querySelector("#box2");
var box3 = document.querySelector("#box3");
// Add event listener to box2 element
box2.addEventListener("mouseover", function() {
box1.style.backgroundImage = "url('left.png')";
box3.style.backgroundImage = "url('right.png')";
});
You could also use the mouseout event listner and toggle back the background images when mouse leaves #box2.
box2.addEventListener("mouseout", function() {
box1.style.backgroundImage = "url('pre-left.png')";
box3.style.backgroundImage = "url('pre-right.png')";
});
I am working on webpage where I want to use background image on hover effect, however I have some issue. Image is display on hover with tranisiton but when I move back my mouse then transition is not working and it is not looking good - there is no hover out effect, I hope it is clear. I would like to also use scall effect for hover but I don't have additional wrapar as content is generated by additional module in joomla.
I tried also implement solution with opacity but then I am loosing my border as I don't have additional wrapper.
So far this is my code on website test3.reksio.net
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in;
background-position: center;
background-size: cover;
}
Is this what you want to achieve?
div{
width: 500px;
height: 500px;
}
div:before{
content:'';
transition: all 0.7s;
position: absolute;
width: 500px;
height: 500px;
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-position: center;
background-size: cover;
opacity: 1;
}
div:hover:before{
opacity: 0;
}
div:hover span{
opacity: 1;
}
<div>
<span>1111</span>
</div>
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
transition: all 0.7s ease-in-out;
background-position: center;
background-size: cover;
}
In order to make the transition appear both upon hovering and leaving the element, apply said transition to the element itself; for example, using your css rules in the question it would look like this:
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
transition: all 0.7s ease-in;
}
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-position: center;
background-size: cover;
}
I never tried animating a background image like this. Since the background image is loaded only on hover, the first time there will be a delay (if it's not loaded somewhere else on the page). I would advise you to load the image in the normal style, and "hide" it with background-position or background-size i.e.
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1)
{
transition: background-size 0.7s ease-in;
background-image: url("https://danielhagnoul.developpez.com/images/boule1.png");
background-size: 0 0;
}
div.zsm_block_news > div.zsm_block_content > div:nth-child(1) > div:nth-child(1):hover
{
background-size: cover;
}
I want to keep the star yellow when I click on it and deselected the color when I re-clicked.
I try to use the :active option.
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<div class="fave"></div>
your can try this by using checkbox if you want to do it with NO js only css
[type="checkbox"]{
display:none;
}
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
display: inline-block;
}
[type="checkbox"]:checked ~ .fave {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<input type="checkbox" id="cb1">
<label class="fave" for="cb1"></label>
:active means while the mouse button (or key) is held down.
It is not a toggle state.
CSS has no mechanism for adding a toggle state.
For that you'll need a checkbox (which you can combine with the :checked pseudo-class) and/or JavaScript (the specifics depending on the semantics you are trying to express).
i think you want something like this
jQuery(document).ready(function() {
jQuery(".fave").click(function() {
jQuery(this).toggleClass("active");
})
})
.fave {
width: 70px;
height: 50px;
background: url(https://cssanimation.rocks/images/posts/steps/twitter_fave.png) no-repeat;
background-position: 0 0;
}
.fave:hover,
.fave.active {
background-position: -3519px 0;
transition: background 1s steps(55);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fave"></div>
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
I would like to switch images from an sprite map when using hover. The images are classes. So far I have
(I have multiple images all with a hover image.)
.contact-icon, .contact-icon-2, .help-icon, .help-icon-2{
background: url(sprites.png) no-repeat;}
-positioning for first image
.contact-icon{
background-position: 0 -77px ;
width: 66px;
height: 66px;}
-
.contact-icon:hover, .contact-icon:active{
.contact-icon-2{
background-position: -95px -75px ;
width: 66px;
height: 66px;
}
}
Or
.contact-icon:hover, .contact-icon:active ~ .contact-icon-2{
background-position: -95px -75px ;
width: 66px;
height: 66px;
}
Should I first declare positioning for the second image and then write a css code for hover with just the class inside? Or can I just style the class within the hover class?
Create a class having common properties of icons like :
.sprite {
background: url(sprites.png) no-repeat;
width: 66px;
height: 66px;
display:inline-block;
}
then create unique classes for each of your icon :
.contact-icon{
background-position: 0 -77px ;
}
then hover actions for each :
.contact-icon:hover{
background-position: -95px -75px ;
}
use it like this in your html: