child div not working with z-index : fiddle
The next button is not clickable .
Any idea ?
<div class="animated" ng-class="{'overlay' :overLay, 'install' : install, 'request' : request, 'flash' : animate, 'add-remove' :add}">
<div class="tooltip-content clearfix animated" >
<div class="lesson-tour-step__header">شروع</div>
<div class="steps">
<a class="btn next-step-btn" href="#" ng-if="btnStepStart" ng-click="steps('start')">next </a>
</div>
</div>
</div>
you have pointer-events: none; remove it and it will work properly
.tooltip-content {
opacity: 1;
position: absolute;
top: 50px;
left: 177px;
z-index: 999999 !important;
background: none repeat scroll 0 0 #2fa0ec;
border-bottom: 20px solid #2a3035;
border-radius: 5px;
color: #fff;
font-size: 0.9em;
line-height: 1.5;
margin-left: -180px;
padding: 1.5em;
text-align: right;
transition: opacity 0.3s ease 0s, transform 0.4s ease 0s;
width: 360px;
z-index:999999 !important;
}
LIVE DEMO
pointer-events: none
The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
Related
I'm maybe 2 weeks into coding so apologies if I don't format correctly (code and question itself).I am trying to set a delay for the time it takes the buttons to switch text. Thank you for the help!
I've tried googling this and youtube with no luck.
I have tried adding
transition
transition-delay
body{
background-color: black;
}
.column{
position: fixed;
left:0;
bottom:0;
top:55px;
width:72px;
z-index: 200;
padding-top: 20px;
}
.about,
.skills {
font-size:72px;
width: 10em;
text-align: left;
border:none;
background-color: black;
color:red;
}
.about:hover span {
display: none;
}
.about:hover:after {
transition-delay: 3s;
content: "ABOUT";
}
.skills:hover span {
display: none
}
.skills:hover:after {
content: "SKILLS"
}
<h1>
<div class="column">
<button class="about" data-hover="ABOUT">
<span>
I
</span>
</button>
<button class="skills">
<span>
AM
</span>
</button>
</div>
</h1>
First of all, I would look into the html semantics a bit. Having div tags inside an h1 doesn't make much sense. So consider changing the h1 to a div. Also, the 3s delay is enormous. Think of something a bit faster, like 300ms.
The real issue is that display states and transition don't really work together since it swaps between states like block and none. But there are other solutions to this. You could use position: relative; on a parent div and give the children position: absolute. This way, you could make the transitions with opacity instead.
I have made an example for you so you can get the idea. I have commented on the CSS so you can follow up on what is happening.
/* Lets give our spans some styling: */
span{
font-size: 30px;
font-weight: 600;
font-family: sans-serif;
margin-bottom: 2rem;
max-width: 60ch;
}
/* Lets make the "container" position relative,
this way the absolute children will stay inside the container */
.hover-effect{
position: relative;
}
/* Let's give both of the children position absolute */
.hover-effect span{
position: absolute;
color: black;
opacity: 100%;
transition: 300ms ease-in 300ms; /* Delay: 300ms*/
}
/* Let’s override the previous.
This actually happens when we remove the hover, so we want to
trigger this animation first, hence the delay of 0ms*/
.hover-effect span.on-hover{
opacity: 0%;
transition: 300ms ease-in 0ms;
}
/* When we hover the container, let's change both spans */
.hover-effect:hover span{
color: red;
opacity: 0%;
transition-delay: 0ms;
}
/* Let’s override the previous.
When we hover on the container, the span with the class "on-hover"
becomes visible, and we wait 300ms before it happens so that the
"disappearing" animation gets its time to trigger. */
.hover-effect:hover span.on-hover{
opacity: 100%;
transition-delay: 300ms;
}
<div class="hover-effect">
<span>Try and hover over me</span>
<span class="on-hover">Try and remove the hover</span>
</div>
So, on hoovering an image, a button appears onto the image, but it is not clickable . The same applies for links or anything inside the div holding the image. I was wondering how i can get over with this.
My html
<div class="content_img">
<img [src]="mydata.image.original" >
<div >
<button type="button"class="btn btn-primary"> Description </button>
</div>
</div>
My Css
/* Parent Container */
.content_img{
position: relative;
width: 90%;
}
/* Child Text Container */
.content_img div{
position: absolute;
bottom: 0;
right: 0;
background:black;
color: white;
margin-bottom: 5px;
font-family: sans-serif;
opacity: 0.7;
visibility: hidden;
-webkit-transition: visibility 0s, opacity 0.5s linear;
transition: visibility 0s, opacity 0.5s linear;
}
/* Hover on Parent Container */
.content_img:hover{
cursor: pointer;
}
.content_img:hover div{
width: 100%;
height: 100%;
visibility: visible;
opacity: 0.75;
}
Can anyone help me out please
What do you mean by that ? I tested the code and <a> tag works. I tested it like follow :
<a href="www.google.com" target="">
<button type="button"class="btn btn-primary">Description</button>
</a>
The button link is clickable. If it is a button, did you set a onclick event so that button call your function?
I'm messing around with CSS animations with pseudo elements for the first time.
I have a button that I want a ripple effect on click, without javascript. I'm almost there, but my button's ':before' element keeps setting itself to the width of the container rather than the width of the button.
Is there any way that I can set the dimensions of the buttons ':before' to the dimensions of the button without JavaScript? Also, I'm having trouble with the actual positioning of the :before element, ideally I would like it to perfectly overlap with the button's border. So any advice with that would help a lot!
Here's the codepen (uses sass): https://codepen.io/NotDan/pen/qvKvQv
the effect is working the way I want it to, it's just the alignment and sizing of the :before element that I need help with
Here's the css:
.custom-btn-primary {
display: block;
background: rgba(0, 0, 0, 0);
color: #d98324;
border: 2px solid #d98324;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:hover {
color: #e5a864;
border: 2px solid #e5a864;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:before {
content: "";
background-color: rgba(0, 0, 0, 0);
border: 2px solid #d98324;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.custom-btn-primary:focus {
outline: 0;
background-color: #d98324;
color: #230007;
font-size: calc(1em + 2px);
border: 0;
}
.custom-btn-primary:focus:before {
animation: ripple-out 0.5s ease-out;
}
Here's the html:
<div class="row">
<div class="col-12 col-md-4">
<button class="custom-btn-primary">primary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-secondary">secondary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-light">light</button>
</div>
</div>
I played around with your codepen and found that you just need to add position: relative; to your .custom-btn-#{$color} class.
Your :before pseudo element is already position: absolute but it’s currently positioning itself to the column instead of the button itself.
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }
I've been trying to fix a problem with my modal window i'm using.
http://dev.ikov.org/store/index.php
When you go to the store, then press weapons on the right hand side, then select the item, the modal window pops up. However, i cant highlight the text or select the textbox or press the button.
HTML
<div id="ags" class="modalDialog2"> <!-- overlay -->
<div id="storeboxitem"> <!-- modal box -->
<div id="storeboxlight">
<!-- content goes here -->
</div>
</div>
</div>
CSS
.modalDialog2 {
position: fixed!important;
font-family: Arial, Helvetica, sans-serif;
top: 0!important;
right: 0!important;
bottom: 0!important;
left: 0!important;
background: #000!important;
z-index: 999!important;
opacity: 0!important;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
#storeboxitem {
display: block!important;
background: url(imgs/contentboxbg.png)!important;
border: 1px solid #070810!important;
position: relative!important;
width: 575px!important;
height: 500px!important;
z-index: 9999!important;
}
#storeboxlight {
display: block!important;
background: url(imgs/lightbg.png) no-repeat!important;
z-index: 9999!important;
border-top: 1px solid #13182c;
margin: auto!important;
width: 575px!important;
height: 100%!important;
}
I've also noticed that the items in the back can be clicked, so i thought it might be a problem with the z-index, so i then tried changing that but nothing worked.
Because you have used pointer-events: none; for the .modalDialog2 element which is the modal's container.
pointer-events: none; prevents the element and its descendants1 from being targeted by mouse events.
Hence, simply remove that:
.modalDialog2 {
/* pointer-events: none; */
}
You can also override the pointer event property for the descendants by using the auto value. For instance, use pointer-events: auto; on #storeboxitem element (The modal box) or another elements.
#storeboxitem { /* A child element */
pointer-events: auto;
}
MDN: Mouse events may target its descendant elements if those descendants have pointer-events set to some other value
Please delete pointer-event: none in .modalDialog2