In the example below I will show you a sample of what I have right now and you will notice when you hover over the black box a transition occurs and slides in my tooltip. My problem is that I want that tooltip to only appear when I hover over the black box. In the example you will notice if you hover over the black or anywhere within 180px right of the black box the transition still occurs( this is because my graphic is 180px wide)! I want to restrict the hover effect to only the black box! Please help!
HTML
<div id="sidemenu">
<div id="regionsContainer">
<div id="regionsUnitedStates">
<div id="regionsUnitedStatesTooltip"></div>
</div>
</div>
</div>
CSS
#sidemenu {
width: 60px;
height: 100%;
min-width: 60px;
height: 100vh;
max-width: 60px;
background-color: #383D3F;
background-size: 100% 100%;
background-attachment: fixed;
position: absolute;
left:-60px;
transition: left ease-in-out 0.5s;
}
#sidemenu.show {
left: 0;
}
#regionsContainer {
width: 60px;
height: 481px;
min-height: 481px;
min-width: 60px;
max-width: 60px;
max-height: 481px;
background-color: #383D3F;
position: relative;
top: 25%;
bottom: 25%;
}
#regionsUnitedStates {
width: 60px;
height: 60px;
background: #000;
}
#regionsUnitedStatesTooltip {
opacity:0;
background: #555;
height:60px;
width:180px;
left:100px;
position:absolute;
transition:all ease-in-out 0.25s;
top:0;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
left: 60px;
opacity:1;
}
Example:
JSFIDDLE
Best way I can see is to make it so you can't hover over the tooltip when it's not visible.
I achieved this by setting it initially to height: 0. Here's the changes
#regionsUnitedStatesTooltip {
height: 0;
transition: opacity ease-in-out 0.25s, left ease-in-out 0.25s;
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
height: 60px;
}
Demo ~ http://jsfiddle.net/pTMCP/3/
Update
Even simpler, add these two lines...
#regionsUnitedStatesTooltip {
visibility: hidden; /* add this */
}
#regionsUnitedStates:hover #regionsUnitedStatesTooltip{
visibility: visible; /* and this */
}
Demo ~ http://jsfiddle.net/pTMCP/5/
Related
I made a div with 2 elements inside: an image and an another div (about). The image is hiding the about div.
Is that possible to make elements which are in the about div clickable when the image disappear with a hover property ?
Thanks in advance !
Also, here's my code but the elements aren't clickable
#logo {
opacity: 1;
visibility: visible;
margin-top: 12.5px;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.blue_border:hover #logo {
opacity: 0;
visibility: hidden;
}
.blue_border {
width: 625px;
height: 625px;
background-image: url("./border.png");
background-repeat: no-repeat;
background-position: 50%;
}
#about {
z-index: -1;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
}
<div class="blue_border">
<img id="logo" src="./logo.png" />
<!-- Img is "on" the about div" -->
<div id="about">
I want to be clicked :-(
</div>
<div class="la-ball-scale-multiple">
<div></div>
<div></div>
<div></div>
</div>
</div>
I don't think I understand it completely, but you cannot click under another element but you can use CSS display: none attr or you do this in a fake way. You can listen to the top element for this and check other conditions on javascript.
As mentioned in the comments, you may can use the pointer-events: none on the overlay to cause it to not receive click events, and allow them to pass through.
function whoWasClicked(e) {
console.log(`${e.target.id} was clicked!`);
};
document.querySelector('#lowerElement').addEventListener('click', whoWasClicked);
document.querySelector('#upperElement').addEventListener('click', whoWasClicked);
#lowerElement {
background-color: rgb(128, 128, 128);
min-width: 25vw;
height: 100px;
text-align: center;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 1;
}
#upperElement {
min-width: 25vw;
height: 100px;
text-align: center;
line-height: 50px;
position: absolute;
top: 37vh;
left: 37vw;
z-index: 2;
pointer-events: none;
}
<div id="lowerElement">Click Me</div>
<div id="upperElement">Overlay</div>
With my current code, I think the z-index: -1; in #about is the problem: #blue_border is an image background and it's upper my "about" div... So I'm trying to find a way to replace that background.
Edit:
Okay. I figured out that the element with z-index: -1; will never be clickable the way I want to.
So I decided to reverse everything: the logo has now the property z-index: -1; and the about div (which is upper now) is hidden until the hover trigger. I also changed my background image by a border.
My code now :
/*Under #about and visible*/
#logo {
z-index: -1;
}
.blue_border {
width: 600px;
height: 600px;
border: 15px solid #71d1f4;
border-radius: 100%;
/*background-image: url("./border.png");
background-repeat: no-repeat;*/
background-position: 50%;
}
/*Hidden first*/
#about {
opacity: 0;
visibility: hidden;
position: relative;
margin-top: -605px;
width: 600px;
height: 600px;
border-radius: 100%;
background-color: #25B8EE;
-webkit-transition: opacity 600ms, visibility 600ms;
-o-transition: opacity 600ms, visibility 600ms;
-moz-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
/*Unhidden on hover*/
.blue_border:hover #about
{
opacity: 1;
visibility: visible;
}
I didn't changed my html
Thanks anyway guys. It was my very first question and I'm glad that some of you already answered me !
when i scrolling down my menubar go behind the cycle slider i tried z-index 1 but its not working please give any soloution i dont know what going wrong
</div>
<img src="http://malsup.github.io/images/p1.jpg">
<img src="http://malsup.github.io/images/p2.jpg">
<img src="http://malsup.github.io/images/p3.jpg">
<img src="http://malsup.github.io/images/p4.jpg">
</div>
</div>
<div class="section_about">
</div>
*{
margin: 0;
padding: 0;
}
/* Top Menu Start Here */
.top_nav{
height: 90px;
width: 100%;
background: rgba(0,0,0,.5);
position: fixed;
z-index: 1;
transition:all 0.7s ease;
-webkit-transition:all 0.7s ease;
-moz-transition:all 0.7s ease;
-o-transition:all 0.7s ease;
-ms-transition:all 0.7s ease;
}
.container{
height: 100vh;
width: 100%;
max-width: 100%;
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ24kd_2tEzjbb_GdPnMQKog7lMCxtYmmy7dxjjpDr6d2ZseK-Dig");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
}
.site-dt{
background-color: #fff;
height: 573px;
width: 100%;
}
#slider-main{
height: 578px;
width: 100%;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider-main #slider img{
height: 100%;
width: 100%;
}
.section_about{
height: 573px;
width: 100%;
background-color: #de5670;
overflow: hidden;
position: absolute;
}
Try doing a
display: block;
or
display: table;
on both of them. Set the index 2 for the menu, and 0 for the slide container. I hope this helps.
Try this :
#slider-main #slider img{
height: 100%;
width: 100%;
position:absolute !important;
z-index:2!important;
}
I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?
https://atmospherejs.com/
You can do that with CSS only and here is one way.
In this sample I used 2 radio inputs to keep track of whether to show the search box or not.
html, body {
margin: 0;
height: 100%;
}
#shide, #sshow {
display: none;
}
.container {
width: 100%;
height: 100%;
background:url('http://lorempixel.com/1024/600/city/9/') no-repeat;
background-size:cover;
transition: transform .6s ease-out, opacity .6s ease-out;
z-index: 1;
}
.showsearch{
position: absolute;
top: 25px;
right: 25px;
background-color: rgba(255,255,255,0.9);
color: #F00;
font-size: 20px;
border-radius: 5px;
padding: 10px 25px;
cursor: pointer;
}
.searchbox {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background: rgba(255,255,255,0.9);
transition: opacity .5s ease-in;
}
.searchbox .close{
position: absolute;
top: 25px;
right: 25px;
width: 60px;
height: 60px;
cursor: pointer;
}
.searchbox .close:before,
.searchbox .close:after {
content: ' ';
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
transform: rotate(45deg);
background: #000;
}
.searchbox .close:after {
transform: rotate(-45deg);
}
.searchbox > div {
position: relative;
top: 46%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.searchbox > div > div {
font-size: 24px;
}
#sshow:checked ~ .searchbox {
opacity: 1;
z-index: 2;
}
#sshow:checked ~ .container {
opacity: 0.4;
transform: scale(0.9, 0.9);
}
<input type="radio" name="search" id="sshow">
<input type="radio" name="search" id="shide">
<div class="searchbox">
<label class="close" for="shide"></label>
<div>
<div>Search box</div>
<input type="text" class="field">
</div>
</div>
<div class="container">
<label class="showsearch" for="sshow">Search</label>
</div>
Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:
Here is a fiddle demo Fiddle
Css:
.search-overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
opacity:0;
background:rgba(255,255,255,0.9);
z-index: -1;
transition: all 250ms ease-in-out;
}
.body-wrapper{
transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
width:100%;
height:100%;
}
.search-open .search-overlay{
opacity:1;
z-index: 5;
}
.search-open .body-wrapper{
position:fixed;
top:0;
left:0;
opacity:0.5;
transform: scale3d(0.85, 0.85, 1);
}
Html:
<div class="search-overlay">
Search Content...
</div>
<div class="body-wrapper">
Body Content...
</div>
Then jquery to toggle the class use a button or something in the body content and the overlay to close it:
$('.search-button, .search-close').on("click", function(){
$('body').toggleClass("search-open");
});
HTML:
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
JS:
$('.button').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
$('.element').on('mouseenter', function () {
$('.element').addClass('active');
}).on('mouseleave', function () {
$('.element').removeClass('active');
});
http://jsfiddle.net/e4p98cwb/1/
When you hover on the black element the blue one enters the screen. After that if you hover for a sec on empty space the blue one starts to escape the screen, but if you hover fast on the empty space that it occupied before two things might happen:
1. The blue one returns fully shown on screen
or
2. Jumps once or twice and proceeds to leave the screen
The same happens on hover and mouseover events as well. Why is this happening and is there a way around this behavior ?
The easiest way to get around any issues with JS is to just let CSS take care of it. If you add this to the :hover state it will work:
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
See below for an implementation. This saves you a ton of JS as well.
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
-webkit-transform: translateX(630px);
transform: translateX(630px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
-webkit-transform: translateX(0);
transform: translateX(0);
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
Update
The reason this is happening is because the element itself is still occupying the same space. This has to do with translation not actually moving the element, but transforming it. Once you move your cursor off any of the activatable elements, it will retract, but as it's animating it still occupies that same space, making it possible to hover on that space and retrigger the animation. I believe it's because this transform is only fully applied after completing the animation. Let's test this theory:
.wrap {
position: relative;
width: 600px;
height: 600px;
overflow: hidden;
border: 2px solid red;
}
.button{
width: 100px;
height: 50px;
display: block;
background: #333;
}
.element {
position: absolute;
top: 0;
right: 0;
z-index: 99999;
width: 500px;
height: 630px;
background: blue;
right: -100%;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.button:hover + .element,
.element:hover {
right: 0;
}
<div class="wrap">
<span class="button"></span>
<div class="element"></div>
</div>
In this one we are simply using absolute positioning and the issue goes away, meaning that the tranform is actually causing the element to still occupy the same space. Until animation concludes.
I have the following: http://jsfiddle.net/yHPTv/2491/
I was wondering why the transition isn't working? What it's supposed to do is slide in the hidden element (which can be of variable width) to the right edge of the .block element, however, it just pops in.
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
left: 100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
left: auto;
right: 0;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
I think it has something to do with left: auto because if I change it left: 50%, it works, but not in the way I need it to.
Thanks.
As you say you can't animate from % to auto. But to get the desire effect you can also use transform property. Try this:
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: 0;
transform:translateX(100%);
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
transform:translateX(0)
}
Check the Demo Fiddle
Consider transitioning on right, from -100% to 0:
.block {
position: relative;
width: 500px;
height: 150px; /* shortened to fit in the "Run" window */
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
right: 0;
transition: 1s;
}
<div class="block">
<div class="hidden">ABCDEFGHIJKL</div>
</div>
For transition to work, you have to define the property you wish to change in both element states.
In your example it doesn't work because there is no common property between '.hidden' and ':hover' (you set the 'left' property in '.hidden', and 'right' property in ':hover')
If you instead use something like:
.block {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
background: lightgrey;
}
.block .hidden {
background: red;
padding: 3px 10px;
position: absolute;
bottom: 0;
right: -100%;
transition: 1s;
}
.block:hover .hidden {
transition: 1s;
right: 0%;
}
It will work because we defined the 'right' property in both states ('.hidden' and ':hover')