I have two div's covering two forms. each time someone clicks on one cover the form reveals. the problem is i want to change the display of one of the submit buttons to "display:none" each time someone click's on one of the covers. any way i can use the :target selector to commit actions on other elements in the same HTML page?
html:
<div id="wrapper">
<!--The cover of the women form-->
<div id="wcover"><h1>MALE </h1></div>
<form id="women">
...
</form>
<input type="submit" form="women" value="Submit" class="submitButton" id="womenSubmit">
<!--The cover of the men form-->
<div id="mcover"><h1>FEMALE</div>
<form id="men">
...
</form>
<input type="submit" form="men" value="Submit" class="submitButton" id="menSubmit">
</div>
css:
#mcover{
left: 183px;
z-index: 1;
top: 131px;
position: absolute;
width: 337px;
height: 355px;
background: #f4f4f2;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
#wcover{
right: 183px;
z-index: 1;
top: 131px;
position: absolute;
width: 337px;
height: 355px;
background: #f4f4f2;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
#mcover:target {
height: 0px;
}
#wcover:target {
height: 0px;
}
try this
the below is the Adjacent Sibling Selector
'#mcover:target + input.submitButton{
display:none;
}'
to select all elements that are siblings
'#mcover:target ~ input.submitButton{
display:none;
}'
Related
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 am having trouble with stacking images in HTML/CSS for some reason. I have three slides, stacked on top of each other, slightly offset so that they peak out from under one another, bottom-to-top. The animation I am using should allow them to slide over to the right when I hover on the edge that is "peaking out." It works perfectly with two images, but for some reason, when I added a third to the pile, the animation for the bottom two stopped working. NO CLUE why this won't work.
Here is the code:
#containerContainer {
position: relative;
}
#instashContainer,
#wisdomCotainer,
#visContainer {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#instashContainer img,
#wisdomContainer img,
#visContainer img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
}
#instashContainer img:hover,
#wisdomContainer img:hover,
#visContainer img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="instash_slidepage.jpg" height=744 width=1820>
</img>
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="wisdom_slidepage.jpg" height=744 width=1780>
</img>
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="visualization_slidepage.jpg" height=744 width=1740>
</img>
</div>
</div>
When I add the third image, on top of the other two, the animation for the other two stops working, but the animation for the top image works (i.e. it slides to the right). When I remove the top image, but change nothing else, the animation for the other two works again.
Why? Also, how can I add this third image without impacting the animation of the other two images?
Problem
you have a typo here: #wisdomCotainer, should be#wisdomContainer
Notes
don't use HTML tags width/height, use instead CSS
<img> tag are self-closed tags, therefore don't need </img>
and you can simplify your CSS in this case by using the direct child selector >
#containerContainer {
position: relative;
}
#containerContainer > div {
position: absolute;
height: 744px;
width: 1860px;
overflow: hidden;
}
#containerContainer > div img {
opacity: .7;
position: absolute;
left: 0px;
top: 0px;
transform: translate3d(-1600px, 0px, 0px);
transition: transform .6s ease-in-out;
height: 744px;
width: 1820px;
}
#containerContainer > div img:hover {
transform: translate3d(0px, 0px, 0px);
}
<div id="containerContainer">
<!--Inspiration Slidepage-->
<div id="instashContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Wisdom Slidepage-->
<div id="wisdomContainer">
<img src="//lorempixel.com/1280/744" />
</div>
<!--Visualization Slidepage-->
<div id="visContainer">
<img src="//lorempixel.com/1280/744" />
</div>
</div>
You've got a typo error here :
#instashContainer, #wisdomCotainer, #visContainer {
}
Should be #wisdomContainer instead.
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.
I created a div that when hovering, reveals a form. the problem is each time im moving the cursor the transition takes place and filling the form become impossible. how can i make the transition work once and than stay/ last for long time?
*i found some information about the delay option but i didn't find a way to modify the delay time separately for the first hovering and then for when the cursor moves out of the div (when "unhovering"). im looking for a pure css sulotion
HTML:
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
css:
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
}
#wcover: hover{
height: 0px;
background:black;
}
Assuming your div is before the form, you may use a transition (e.g. of the opacity property) with a long delay on "unhover"
e.g.
Markup(*)
<div id="wcover">hover me</div>
<form id="women">
<label >whats your name</label>
<input type="text" name="fullName">
</form>
Css
form {
opacity: 0;
transition: opacity 1s 999999s;
}
div:hover + form {
opacity: 1;
transition: opacity 0s;
}
After the hover event, thanks to the delay inserted, the user may takes up to 999.999 seconds (approx.ly 277.7 hours) to fill the form.
Live Example: http://codepen.io/anon/pen/dPYOLB
(*)As a side note, for a matter of markup validation, you can't insert an heading into a label.
You properly need some jQuery here....
$("#wcover").hover(function() {
$("#wcover").addClass("hovered");
});
And some CSS:
.hovered { //Properties here }
Alternatively, you could make use of a checkbox to show/hide your div on click. It is not very clear from your question as to whether you are showing the form which is shown in your code, or the div itself which contains another form.
Am assuming, that you have a form inside the div.
#wcover {
opacity: 0;
transition: all 1s;
}
label[for=chk] { cursor: pointer; }
#chk { display: none; }
#chk:checked + #wcover { opacity: 1; }
<label>
What's your name?
<input type="text" id="fullName" />
</label>
<br /><br />
<label for="chk">Click to Show/Hide Complete Form</label>
<input id="chk" type="checkbox" />
<div id="wcover">
<form id="women">
<h2>Complete Form</h2>
<input type="text" /><br/>
<input type="text" /><br/>
</form>
</div>
Could you not wrap it all in a containing div and apply the hover to that?
<div id="form-container">
<form id="women">
<label >
<input type="text" name="fullName" >
</label>
</form>
<div id="wcover"></div>
</div>
Hi Use CSS transitionn delay property
#wcover{
right: 177px;
z-index: 1;
top: 291px;
position: absolute;
width: 337px;
height: 402px;
background: yellow;
-webkit-transition: height 2s; /* For Safari 3.1 to 6.0 */
transition: height 2s;
transition-delay: 1s;
}
#wcover: hover{
height: 0px;
background:black;
transition-delay: 0s;
}
The above css will give delay after the mouse out. just reverce it to do it other way
Hopefully tis is a reallllly easy fix that I'm just not seeing, but I've been trying every solution I could find that arched even close to this in previously submitted questions and I'm just getting nowhere.
The short of it: I've got a CSS tab setup working that's great, EXCEPT for when it comes to styling the actual labels on the tabs. It works great with a single style, but as soon as I try to introduce a secondary font style (bringing the font size down to 11px), the right hand side of the tab disappears.
And unfortunately I NEED to be able to have those two different font sizes/styles displayed in the tab label. I've tried using span, div, etc. treatments but everything makes the right border of the tab go away. Any help is HUGELY appreciated!
Here's a fiddle: http://jsfiddle.net/wKtPL/
Here's my sample HTML:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Library <div class='tab-count'> 123</div></label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Institution’s Subscriptions</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Copyright Agent</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Internet Archive</label>
<div class="content">
content goes here
</div>
</div>
<div class="tab">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">HathiTrust</label>
<div class="content">
content goes here
</div>
</div>
And the CSS behind it:
.tabs {
position: relative;
min-height: 550px;
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #dadcde;
color: #3f4b54;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
font-size: 14px;
font-weight:bold;
margin-right:5px;
}
.tab-count {
font-size: 11px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
.content > * {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 3px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
}
By secondary font style do you mean the div nested in the label? If that's the one with class .tab-count you could set float:right. That will keep it in the same line.
.tab-count {
font-size: 11px;
float:right;
}
A couple of things, firstly the 123 is being hidden under the .content so you need a taller top value.
Secondly, your labels, while being position: relative; are still only being implicitly rendered as display: inline;, so it's hiding the 123 div underneath the label itself.
http://jsfiddle.net/wKtPL/1/
.tab label {
[ ... ]
display: inline-block;
min-height: 2.5em;
}
.content {
[ ... ]
top: 60px;
}
... and muck with styling as you need.
This is caused by the usage of a block element inside your label element, which is an inline element. To fix this, change your <div class='tab-count'> 123</div> to <span class='tab-count'> 123</span>. Here is a demo of it.
If you want to allow block-level elements to be placed within inline elements, you could like #setek said, use the alternative inline-block which is a kind of hybrid of block elements and inline elements.
You should never use block elements inside inline elements, since that will cause problems like this one. What was happening was that the styles for the inline <label> tag were being dragged across 2 lines, since the <div> was taking up an extra line. That dragged the left border down a line too, which is why you didn't see it anymore (it was below the other tabs).