I have an element which has display:none attribute.
Now if a user hovers the parent, it will be shown:
.item:hover .description {
display: block;
z-index: 1;
}
Now, when I execute
$(".description").hide()
to hide the element again (the user can click an X in the element to close it), the element will not show again if the user is hover the parent again. It stays hidden.
How do I not mess up with the css show and hide functions?
The way you have given your code is you are mixing up CSS and JavaScript. The jQuery uses inline-styles to accomplish the .hide() or show. And inline-styles are more specific than the CSS. Either use classes and toggle them or just use JavaScript.
I would do this way:
.item:hover .description {
display: block;
z-index: 1;
}
.item .description {
display: none;
}
The above is a pure CSS method. But using JavaScript, I would consider using toggleClass() instead of .hide() or .show().
.item:hover .description {
display: block;
z-index: 1;
}
.item .description.hidden {
display: none;
}
And in the JS:
$(".description").addClass("hidden");
And when you want it to be shown, you can always use:
$(".description").removeClass("hidden");
And for toggling things, you can use:
$(".description").toggleClass("hidden");
hide will add an inline style to hide the element, which will override the CSS style in this case.
If you're using JavaScript to hide the element, you'll need to use JavaScript to remove that inline style when no longer relevant. I'd use a mouseleave event handler on .item and a class to hide description:
CSS:
.item:hover .description.hide {
display: none;
}
Hiding description in response to click on X:
$(".item .description").addClass("hide");
Removing that when the user no longer hovers .item:
$(".item").on("mouseleave", function() {
$(this).find(".description.hide").removeClass("hide");
});
Either with direct handlers as above, or with event delegation (I use delegation in the example below).
Live Example:
// Hide when X clicked
$(document.body).on("click", ".item .description .close", function() {
$(this).closest(".description").addClass("hide");
});
// Reset when user no longer hovering
$(document.body).on("mouseleave", ".item", function() {
$(this).find(".description.hide").removeClass("hide");
});
.item .description {
display: none;
}
.item:hover .description {
display: block;
z-index: 1;
}
.item:hover .description.hide {
display: none;
}
/* The following are just for the demo */
.close {
cursor: pointer;
}
.item {
position: relative;
height: 2em;
border: 1px solid black;
}
.item .description {
position: absolute;
background-color: #eee;
left: 10em;
top: 2px;
border: 1px solid #ddd;
}
<div class="item">
I'm item 1
<div class="description">
I'm description 1
<span class="close">[x]</span>
</div>
</div>
<div class="item">
I'm item 2
<div class="description">
I'm description 2
<span class="close">[x]</span>
</div>
</div>
<div class="item">
I'm item 3
<div class="description">
I'm description 3
<span class="close">[x]</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
It's because during hiding this element by JS, you set visibility: hidden to it. After next focus on parent, you won't set visibility: visible which is required.
You can for example execute
$(".description").show()
after next focus on parent element
Related
Can anyone help me out with something really simple but can't seem to find anywhere. I am using scss right now and I want the button to only display when I hover it. I have it hidden right now and here is the code. I am also using svgs and my button is nested within a block. Thanks guys
&__button {
display: none;
cursor: pointer;
border: none;
outline: none;
width: 32px;
height: 32px;
background: url("../../assets/Icons\ -\ Thin\ Delete.svg") center center no-repeat;
&:hover {
background: url("../../assets/Icons\ -\ Thin\ Delete\ On\ Hover.svg") center center no-repeat;
}
}
Use visibility: hidden for default state and visibility: visible for hover state.(https://developer.mozilla.org/en-US/docs/Web/CSS/visibility)
However, you have to nest your button inside another div. Hover states don't work when an element is hidden. (Why isn't CSS visibility working?)
Example code:
HTML
<div class="button-container">
<button>
Hover
</button>
</div>
CSS
.button-container button {
visibility: hidden;
...
}
.button-container:hover button {
visibility: visible;
}
or in SCSS
.button-container {
button {
visibility: hidden;
}
&:hover {
button {
visibility: visible;
}
}
}
I think it's better simply use opacity.
NOTE: Obviously, it's not visible but still affects layout as normal
.button
{
opacity:0
}
.button:hover
{
opacity:1
}
I had an element which was the top level dom elemnt. I decided to build a user interface over the top, allowing for items to be placed in interface-overlay. It seems I can't click anything inside my interface-overlay, but I can click underlying elements?
Sure, I want to click underlying elements, but I also want to be able to click the overlay, and also click the underlying elements where the overlay doesn't have any dom elements covering it.
I used this, but it seems to block for all space:
pointer-events: none;
If I remove the pointer-event attribute, it flips the issue. I can click the overlay but not the underlying elements.
Code pen showing the issue: https://codepen.io/samhabbo/pen/ExymBBK
One option is to apply pointer-events: none to the parent container but then reset it back to auto on child elements:
.interface-overlay {
/* ... */
pointer-events: none;
}
.interface-overlay > * {
pointer-events: auto;
}
html, body {
margin: 0;
}
.tile {
opacity:0.8;
background-color:#ccc;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
padding: 50px;
}
.interface-overlay {
position: absolute;
z-index: 5;
width: 100%;
height: 100%;
padding-left: 20px;
color: #FFFF;
pointer-events: none;
}
.interface-overlay > * {
pointer-events: auto;
}
button.button {
background-color: red;
}
<div class="interface-overlay">
<button class="button">Overlay button</button>
</div>
<div class="tile">
Some tile content.
<button class="button" onclick="alert('test');">Underlying button</button>
</div>
Since my last question was marked as a duplicate, while it was no duplicate, and no-one is changing it back, I will just ask my question again.
I have an <a>, which has, by default, a on-click function. This <a> also has a hover, which I would like to keep.
How do I disable the click function, but keep the hover?
P.s., I would love to see a CSS solution!
Important! Last time, my question was marked as a duplicate of this question: How to disable a link using only CSS?, but pointer-events:none; is also blocking the hover.
If it is still a duplicate, please mark it as a duplicate of a question that is truly a duplicate.
Edit:
I forgot to mention, that my hover is made like this:
https://jsfiddle.net/7o3dbak7/7/
HTML:
<div class="container">
<ul>
<li id="item1">hoverable object</li>
<li id="item2">text object, here comes alot of text explaining certain features of the website.</li>
</ul>
</div>
CSS:
.container ul #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
cursor: pointer
}
.container ul #item1 {
pointer-events: none;
}
.container ul #item1:hover + #item2 {
display: block;
}
Add pointer-events: none to the a element, then apply the hover to the parent element, targeting the a specifically within that:
span a {
pointer-events:none;
}
span:hover a {
color: red;
}
<span>Hello, world!</span>
I would not use anchor to begin with. Replace anchor with a paragraph tag and modify your CSS.
CSS:
.container #item2 {
display: none;
width: 150px;
padding: 20px;
background: red;
color: white;
}
HTML:
<div class="container">
<p id="item1" href="somelinkthatistherebecauseitis">hoverable object</p>
<div id="item2">text object, here comes alot of text explaining certain features of the website.</div>
</div>
I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.
<script type="text/javascript">
$(document).ready(function() {
$('#right').click(function() {
$('li').animate({
left: '-600px'
}, 500);
});
});
</script>
Fiddle
See this example.
This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.
.carousel-inner li {
display: inline;
float: left;
margin: 20px;
border: 1px solid #999;
padding: 25px;
border-radius: 20px;
position: relative; // Add this so setting a left position will work
}
Simply try adding that in Chrome Inspector and you'll see it works. Ciao!
Add position: relative to your .carousel-inner li.
Do not bind it to javascript "onclick".
It needs to be an anchor.
I know I can bind onclick to the div and make it window.location. However, then...the user cannot open a new tab by CONTROL+Clicking it.
I just want an <a> that fills up the entire div.
Try setting the anchor to display as a block within your DIV and setting its height to 100%, like this:
<style>
a { display: block; height: 100% }
#test { width: 100px; height: 200px; background: red; }
</style>
<div id='test'><a href='#'>...</a></div>
You can see a working example here: http://jsbin.com/ujoca3/2/edit
The semantic way to do it would be to have the anchor act like a div. Because you don't want anything else in the container there's no point in having a container.
<style>
a.fakeDiv, a.fakeDiv:link, a.fakeDiv:hover, a.fakeDiv:active, a.fakeDiv:visited{
display: block;
text-decoration: none;
color: Black;
cursor: default;
outline: none;
}
</style>
<a class="fakeDiv">Content</a>
some html:
<div></div>
some css
yourdiv { position: relative; }
yourdiv a { position:absolute; left:0;right:0;top:0;bottom:0; }
<div>
</div>