<div class="logoWrap">
<img src="https://i.imgur.com/OBFbjSK.png">
<p class="logoDesc">this is img desc</p>
</div>
I want to avoid using javascript, is it possible to change the value of other element using :hover? if possible I want to add transition.
http://jsfiddle.net/UH2Aq/
Do you mean that you want the hover on the logoWrap to make the logoDesc appear?
If so:
http://jsfiddle.net/wildandjam/emELN/
.logoWrap:hover .logoDesc{
opacity:1;
}
Then, if you want, you can add a CSS3 transition, to make it more fluid.
Same answer with transition : http://jsfiddle.net/UH2Aq/1/
.logoDesc{
transition: opacity .2s ease-in-out;
opacity : 0;
}
.logoWrap:hover .logoDesc {
opacity: 1;
}
Related
So I have a custom expandable select. I want to apply two different transitions, one for the opening and one for the closing of the select.
.select-generic-2 {
max-height: 39px;
overflow: hidden;
z-index: 2;
transition: z-index 0s, max-height .25s ease-in-out 0s;
}
.select-generic-2.expanded {
z-index: 3;
max-height:1000px;
transition: max-height .25s ease-in-out 0s, z-index 0s .25s;
}
Here's the HTML structure of my custom select
<span class="select-generic-2 shadow-input">
<input type="radio" name="status" value="3" id="3">
<label for="3">text</label>
<input type="radio" name="status" value="4" id="4">
<label for="3">text2</label>
</span>
I am toggling the .expanded class with JS, but always the first transition property is executed. I want to change the z-index in such way to avoid overlapping with other elements with the same .select-generic-2 class (only one element has the .expanded class at a time). Any suggestion will be very welcome!
EDIT: I just realized that the problem is different and not related to the transitions. Just every single select has a default z-index value of 2 and when the .expanded class is removed the select boxes located under the collapsing are appearing over it because they have the same z-index (2) and are put over the collapsing (which is located above them in the code) by the browser.
Since you want to toggle the .expnaded class, use the class alone, then use your JS to add or remove the class on 'toggle'.
.select-generic-2 {max-height: 39px; overflow: hidden; z-index: 2; transition: z-index 0s, max-height .25s ease-in-out 0s;}
.expanded {z-index: 3; max-height:1000px; transition: max-height .25s ease-in-out 0s, z-index 0s .25s;}
Then on 'toggle', get the element from DOM and use add the class '.expanded'
To add class: https://www.w3schools.com/howto/howto_js_add_class.asp
To remove class: https://www.w3schools.com/howto/howto_js_remove_class.asp
Well guys I just added a new class called .collapsing which looks like this:
.select-generic-2.collapsing {
z-index: 1;
transition: z-index 0s 0s, max-height .25s ease-in-out 0s;
}
It is called when another select is being open and is removed when the expansion of the another select is complete.
The JS looks like this:
const select = document.querySelectorAll('.select-generic-2');
//this is inside the event listener
selected = this;
select.forEach(function(el){
if (el != selected){
el.classList.remove("expanded");
el.classList.add("collapsing");
setTimeout(function(){
el.classList.remove("collapsing");
}, 250);}
});
A little bit cheesy solution, but it works!
I have a div that I want to be visible as :target using css. This is working fine so far. My problem is: I want it to be faded in and out.
My code:
<div id="stuff">
Content
</div>
#stuff {
opacity:0;
transition: opacity .5s ease-in-out;
}
#stuff:target {
opacity:1;
}
So let's say on the following url it should fade in (what it does):
example.com/example.htm#stuff
But when I change the url to the following (or anything else), it just becomes invisible without a transition:
example.com/example.htm#
Note that I want to change the url by clicking on a link, not by modifing it via JavaScript.
My question is:
Is it possible to have a transition when changing the target for the previous target without the use of JavaScript? How would you accomplish it?
I do not want to use any JavaScript at all, if possible.
I just changed the value of the opacity property and it's working. As far as I know, opacity only accepts a decimal value between 0 and 1 (apart from inherit, initial and unset).
#stuff {
opacity:0;
transition: opacity .5s ease-in-out;
}
#stuff:target {
opacity:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="stuff">
Content
</div>
Add hash
Remove hash
HTML Code, CSS code, and Result
I want the behavior of the links when in hover state, the link will have an opacity of 0.5 then the tooltip will appear but with an opacity of 1.
As you can see on the photo, when in hover state, both the link and the tooltip have an opacity of 0.5.
I tried adding this:
.tooltip-text:hover{opacity: 1;}
My guess is, maybe the opacity of .img_links is overriding any changes in opacity made with .tooltip-text because they are one element of anchor tag element??
Any help will be appreciated. Thanks.
You can use the following CSS:
.img_links:hover > img {
opacity: 0.5;
}
to replace:
.img_links:hover .tooptip-text {
visibility: visible;
opacity: 1;
}
.img_links:hover {
opacity: 0.5;
}
When your mouse is on the image or the tooltip, the image will still be 0.5 opacity with no effects on tooltip. Hope this can help you ;)
Since the tooltip is a child of .img_links, if you lower the opacity of .img_links, the tooltip can never get more opaque than it's parent.
replace
.img_links:hover { opacity: .5 }
with
.img_links img:hover { opacity: .5 }
Or move the tooltip out of the img_links container.
I've got two divs, div 1, and underneath it is hidden div 2. When I hover over div 1, I want it to hide, and show div 2. Then, once I mouse off of the area (now div 2), div 1 is displayed again.
Here is the code:
<a href="javascript://" class="hoverable">
<div class="normal" style="background:#666;">Hover over me!</div>
<div class="hover" style="background:#888;">Now you see me!</div>
</a>
and here is the css:
<style>
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
}
.hoverable .hover {
display:none;
}
.hoverable:hover .normal {
display:none;
}
.hoverable:hover .hover {
display:block;
}
</style>
My only problem with this is that is is very quick, cut and dry, and not very "fancy". I'd like to add something simple like a fade effect.
I've gotten this working, without the fade effect, here:
http://jsfiddle.net/pBDGW/
If anyone knows how to make those two divs transition with a fade-out, please let me know!
You can use CSS transition with opacity like this:
.hoverable {
cursor:default;
color:#000;
text-decoration:none;
position: relative;
display: block;
}
.hoverable .hover {
opacity:0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.hoverable .hover,
.hoverable .normal{
transition: opacity .5s;
-o-transition: opacity .5s;
-ms-transition: opacity .5s;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
}
.hoverable:hover .normal {
opacity:0;
}
.hoverable:hover .hover {
opacity:1;
}
You can see the jsfiddle here: http://jsfiddle.net/pBDGW/12/
Some explanation:
The transition applied to both div are the main code that make them fade in & out. You can read more about it here: http://css3.bradshawenterprises.com/transitions/
Since you want the first div to fade out, and the second div to fade in, there will be a moment when both div have to be visible partially, hence position: absolute and some positioning on the second div (to make it overlap with the first div).
You are wrapping an anchor (<a>) around both div, which is actually not encouraged, so I have to give it display: block; . A better approach (HTML-wise) is to wrap both div inside another div (still use the same class hoverable), and use 2 different anchors inside each div.
EDIT: this approach http://jsfiddle.net/pBDGW/14/ works too. Here you only fade out the first div, while the second div is always visible but is hidden under the first div when not hovering. It is shorter css, but I don't recommend this approach though because I sometimes have issues with getting the first div to go on top on different browsers.
You can use jQuery, it has functions fadeIn and fadeOut and also its easy to hide() and show() on events mouseOver and mouseLeave.
You can see fiddle here.
$(document).ready(function(){$(".hover").hide();
$(".normal").mouseover(function(){
$(".normal").fadeOut(0);
$(".hover").fadeIn(1000);
});
$(".hover").mouseout(function(){
$(".normal").fadeIn(1000);
$(".hover").fadeOut(0);
});});
You can use transitions:
ADD THIS TO YOUR :HOVER
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
This adds the effect of fade IN/OUT
Addition: this will only work if you have property set for :hover, for example if you want to change the color, or background or what ever..
The following code shows the image in the div tag.
<div class='item'>
<img class='img' src="image1.png" alt="" />
</div>
I am using the following css to add effects to the html image code:
img{
width:50px;
height:50px;
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
I am using this to have opacity effects in css. With this code, the opacity effect works well when I hover over the image itself. But how do I make it so that the opacity effect on the image occurs when I hover over the div tag instead. I want to be able to hover over any part of the item div which encapsulated the image, to get the change opacity effect on the image. NB effect on just the image not the entire div. Can this be done in css? If so how?
Change this:
img:hover{
opacity:1.0;
filter:alpha(opacity=100);
}
to
.item:hover img{
opacity:1.0;
filter:alpha(opacity=100);
}
This will change the opacity of the img when the div is in hover state.
If you use jquery for this then I think this will be easy
$('.item').hover(function(){ $('.img').css('opacity','1.0');}, function(){ $('.img').css('opacity','0.4');});
I assume you know jquery. You can't use :hover pseudo class of CSS over elements that don't have href attribute according to Sitepoint.