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>
Related
I been looking all over on google and I cant seem to find a working solution for this situation. I basically want to use a div call trigger to successfully execute document.execCommand(); but I notice that document.execCommand() don't work with a
div as a event listener and I know this works with a button tag but I don't want to use a button with this so how can I get this working with a div and I know one of you guys will say, you know you don't need to use document.execCommand to do something like this
and I am aware of that but for personal reasons I need to do this with a div with document.execCommand.
My code
document.querySelector('#trigger').addEventListener('click',underline);
function underline(){
document.execCommand('underline', false, '');
}
#trigger{
background-color: red;
height: 50px;
width: 100px;
color: white;
position: relative;
border-radius: 8px;
cursor: pointer;
display: block;
}
<div id='trigger'></div><!--</trigger>-->
<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>
<p contenteditable='true'>Adam</p>
This code should make it work try this out.
document.querySelector("#trigger").addEventListener('mousedown',function(event){event.preventDefault();});
document.querySelector('#trigger').addEventListener('click',underline);
function underline(){
document.execCommand('underline', false, '');
}
#trigger{
background-color: red;
height: 50px;
width: 100px;
color: white;
position: relative;
border-radius: 8px;
cursor: pointer;
display: block;
}
<div id='trigger'></div><!--</trigger>-->
<p>Text highlight the word Adam and press the red trigger to add a underline to Adam.</p>
<p contenteditable='true'>Adam</p>
I took ideas from this post and I converted this method into a event listener version for your situation.
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
I'm trying to create a link that changes into two links when you hover over the text. You can see something like what I want to do here: https://www.kenzo.com/en/ You can see that the collections link changes into two separate links for men and women when you hover over the link. At the moment I have managed to create a link that separates into two words when hovered over but not into two links.
Here is my HTML code:
<li><span>Collection</span></li>
And here is my CSS code:
#nav-item1:hover span {
display:none;
}
#nav-item1:hover:before {
content: "Men Women";
}
So the text changes which is great, but I haven't quite figured out how to turn the text into two separate links. I'm not sure if I have to use JS for this or not, as my JS knowledge terrible.
Any ideas?
If I understand you right you can try something like this:
li {
list-style: none;
}
li a {
display: none;
margin-left: .3em;
}
li:hover span {
display: none;
}
li:hover a {
display: inline-block;
}
<li>
<span>Collection</span>
Man
Women
</li>
Okay so here is a small breakdown of how you can achieve this.
There is a block element on the top of things.
Then there are two hidden elements that are children of the block element.
And when you hover over the block element the other ones are shown.
You can also hide the child element that contains the text on hover.
.block:hover .hide {
display: inline;
}
.block {
color: black;
font-size: 20px;
}
.hide {
display: none;
}
<div class="block">
<span class="default text">Hover</span>
<a class="hide" href="#">Snowball</a>
<a class="hide" href="#">Kitten</a>
<div>
.splitted {
display: none;
}
.links:hover .one-link {
display: none;
}
.links:hover .splitted {
display: inline;
}
<span class="links">
Collection
Men
Women
</span>
Please try this
#nav-item1{
position: relative;
}
#nav-item1:before,
#nav-item1:after{
display: none;
position: absolute;
top: 100%;
color: #000;
}
#nav-item1:hover:before,
#nav-item1:hover:after{
display: block;
}
#nav-item1:before{
content: 'Men';
right: 50%;
}
#nav-item1:after{
content: 'Women';
left: 50%;
color: green;
}
<ul>
<li><span>Collection</span>
</li>
</ul>
The up image shows the unwanted red selection out of the yellow area when you select cross lines. I want to select within the yellow part, like the following:
HTML:
<div id="parent">
<div id="child">
This is some content... This is a long lonnnnnnng content.
</div>
</div>
CSS:
#parent {
width: 200px;
background-color: #666;
}
#child {
padding: 50px;
background-color: #ff0;
}
::selection {
background-color: #f00;
}
Do you know how to achieve this?
Run code here: http://jsfiddle.net/3AESf/
You can use display: inline-block; on #parent to solve it
An alternative solution, if display:inline-block would not be an option, would be to add
overflow: hidden;
to #parent. That works too.
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>