I'm building a site where a seperate div is on top of another. When you hover over the top div I want it to disapear while you hover over it and you should be able to click it.
I at first thought that
opacity: 0;
and
pointer-evets: none;
would do the trick, however, with only opcaity 0; you can't click though the div, and with the pointer-events: none; it doesn't fade.
Anyone got a solution to this?
If a div is on top of another div, it will catch all of the events, even if it's at opacity:0.
You could try visibility:hidden instead, since AFAIR this actually removes a div from the layout.
EDIT: "remove from the layout" was a poor choice of words. The commenters are of course right, it's still there.
You can try like this:
$(function () {
$(".parent").click(function () {
alert("I am in Parent");
});
$(".child").click(function (e) {
alert("I am in Child");
});
});
* {font-family: 'Segoe UI';}
.parent {border: 1px solid #ccc; position: relative; padding: 50px;}
.parent .child {border: 1px solid #ccf; padding: 15px; position: absolute; left: 10px; top: 10px; -webkit-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;}
.child:hover {opacity: 0;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="parent">
<div class="child"></div>
</div>
<p>Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.</p>
Please try clicking on both the boxes. One is parent and the other is child. The child will be clickable even though it is hidden.
Try opacity: 0.001;.
It visually brings the exact same result than opacity:0; and has helped me short out similar situations where pointer-events: none; didn't work either.
Related
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 3 years ago.
I'm trying to have a word like "hello" then when you click on it, it fades out and a new word fades in.
Is there any way to do this only using HTML and CSS? If not, I guess I'm going to have to learn javascript and/or jquery.
You can play with selector and html elements trying to achieve wat you want, this is what i made.
I used css pseudo-classes ( here you can find a list of pseudo-classes with relative explanation )
the pseudo-classes are used for detect special states of the elements, like the :hover ( i think the most used ) pseudo-class that detects when the mouse is hover an element.
in this case i used
:focus: That selects the element that has the focus ( like when you click a link, in the moment that you click the link it get the focus same thing when you click and input, so if you click the input it gets the focus.)
:visited: Is used for detect the visited links, unfortunatelly this selector has a special behaviour becouse it can be used for violate the user privacy, so you cannot correctly styles othe elements based on the links that has been visited ( that is what i tried to do here )
<a href="#" id="first">
hello
</a>
<a href="#" id="second">
hello
</a>
<style type="text/css">
#first{
text-decoration: none;
color: black;
opacity: 1;
outline: none;
transition: opacity 1s;
}
#first:visited{
opacity: 0;
}
#first:focus{
opacity: 0;
}
#second:focus{
outline:none
}
#second{
opacity: 0;
text-decoration: none;
color: black;
transition: opacity 1s;
}
#first:focus + #second{
opacity: 1;
}
#first:visited ~ #second{
opacity: 1;
}
</style>
Unfortunatelly as this when the user click another element the previous text comes back
Using transition can solve your problem. This may help you.
By the way, learning JS could be a real asset for web dev ;)
Do You mean something like this?
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
</style>
Updated according to comment:
<span>Hello</span> <span>World</span>
<style>
span { transition: opacity 1s ease; position: absolute; top: 0; left: 0 }
span + span,
span:first-child:active { opacity: 0; }
span:first-child:active + span { opacity: 1; }
span + span { pointer-events: none; }
</style>
https://codepen.io/Patu/pen/RwNZOoM
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
Here is the site I'm working on: revistapuerto
It's a Wordpress based site. What I'm trying to achieve through CSS, is to get the excerpt to appear over the picture when you hover over the Title of the post. Right now, the excerpt appears when you hover over the picture only. Want to keep that effect, and add the Title thing.
The picture - excerpt effect I got it from another user here, and here is the CSS in case it helps:
#magia {
position: relative;
}
#magia img {
display: block;
}
#magia .cornerLink {
width:494px;
height:330px;
opacity: 0;
position: absolute;
top: 32px;
left: 0px;
right: 0px;
padding: 0px 0px;
background-color: rgba(0,0,0,0.50);
text-decoration: none;
text-align: center;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}
#magia:hover .cornerLink {
opacity: 1.0;
}
Thanks!
Honestly the question isn't very clear, you're gonna need to give more information. All I can really offer in regards to what you've asked is basic fiddle: http://jsfiddle.net/MBLZx/
HTML:
<div class="showhim">HOVER ME
<div class="showme">hai</div>
<div class="ok">ok</div>
</div>
CSS:
.showme{
display: none;
}
.showhim:hover .showme{
display : block;
}
.showhim:hover .ok{
display : none;
}
(also the website won't load for me, could just be my work computer!)
that shows how to use hidden divs to make divs appear using a hover.
More information and I might be able to help you out :)
If I understood what you want, here's how you can achieve it.
#div-for-hover:hover #Div-you-want-to-show {
display: block;
}
The method is simple: The block of CSS code simply says when you hover of #div-for-hover, I'll show #Div-you-want-to-show
Note: The hover could be on a headings, DIVs, images, and more.
Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ