I have div element which I need to disable. So I have defined the following CSS class for it:
.hideDiv {
pointer-events: none;
cursor: not-allowed;
}
While the first line of the CSS class works fine, the second line does not. Can you help me with this?
Please note that I need to get this work on Internet Explorer.
pointer-events: none will effectively stop mouse interactions with .hideDiv. This means that the action of hovering over the div will also be prevented, thus making the cursor not appear.
Instead, you can wrap your .hideDiv in another div, and add the cursor property to the outer/parent div.
See example below:
.box {
height: 100px;
width: 100px;
border: 1px solid black;
}
.parent {
cursor: not-allowed;
}
.hideDiv {
pointer-events: none;
}
/* Remove pointer-events: none and the below css works */
.hideDiv:hover {
background-color: lime;
}
<div class="parent box">
<div class="box hideDiv">
</div>
</div>
Related
I've put together this pen: https://codepen.io/NanoSpicer/pen/YzQgQVd
The idea is that using the sibling selector I want to style a certain element when the element before the one I want to style is focused.
It works great with input elements, but it fails miserably when using elements with contenteditable attribute:
.container,
form {
width: 30%;
display: flex;
flex-direction: column;
gap: 10px;
}
div[contenteditable="true"]::before {
text-color: gray;
opacity: 0.6;
content: attr(placeholder);
}
div[contenteditable="true"],
input {
/* remove system hightlighting*/
outline-style: none;
box-shadow: none;
min-height: 40px;
appearance: none;
border: 3px solid;
border-color: gray;
border-radius: 6px;
}
div[contenteditable="true"]:focus,
input:focus {
border-color: blue;
}
*:focus+* {
border-color: red;
}
<form>
<input placeholder="first" id="first" type="text">
<input placeholder="second" id="second" type="password">
</form>
<div class="container">
<div contenteditable="true" placeholder="first"></div>
<div contenteditable="true" placeholder="second"></div>
</div>
Note: Tested on Firefox and Chrome.
That is very strange. Probably a bug.
This workaround is good for Firefox and Chrome on PC. Didn't test other browsers / platforms.
[contenteditable]:focus + * {
border-color:green;
}
Just like you did for in the beginning of your CSS, be more specific to indicate you want to react with the contenteditable attribute.
By default, div are not editable, so not focusable, so you have to be a bit more specific with this.
To make this work, you should edit the last CSS property to add the second selector line like I wrote here :
*:focus + *,
div[contenteditable="true"]:focus + div {
border-color: red;
}
or if you want to make it more generic:
*:focus + *,
*[contenteditable="true"]:focus + * {
border-color: red;
}
I'm working on a userscript for a page, so I don't have control over the original HTML. Also, because of the way the page loads and the script works, for various reasons I can only use CSS modifications here, and the modifications can only be on page-level CSS (not per-element style attributes).
So, the issue is, there is a large a element that has a hierarchy of divs in it. I would like to disable pointer events only on one of the child divs, while leaving everything functioning as normal everywhere else on the a. For example:
const disableBottomPointerEventsStyle =
'.bottom { pointer-events: none; cursor: default; }';
$('#test').click(function () {
$('<style/>')
.attr('type', 'text/css')
.text(disableBottomPointerEventsStyle)
.appendTo(document.head);
$(this).toggle();
});
.link { display: flex; width: 10ex; height: 20ex; margin-bottom: 1ex; }
.wrapper { display: flex; flex-direction: column; }
.top { border: 1px solid red; }
.bottom { border: 1px solid blue; }
div { flex-grow: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- example of page structure: -->
<a class="link" href="about:blank">
<div class="wrapper">
<div class="top"></div>
<div class="bottom"></div>
</div>
</a>
<!-- ========================== -->
<button id="test">Test</button>
In that example there is an a with some divs in it, and the goal is to disable pointer events only on the blue div on the bottom while leaving everything else as-is.
To use the example press the Test button; this will insert a style rule in the document. My current best attempt is the value of disableBottomPointerEventsStyle:
.bottom { pointer-events: none; cursor: default; }
This has no effect.
So my question is, is it possible to do this only by modifying a page-wide CSS rule and, if so, how?
Note that this is fundamentally a CSS question, the JavaScript is pretty much incidental here.
The secret is to disable natural a behaviour, and enable it in the child.
I used hardcode a.link - to minimise a risk of side effects.
Supported https://caniuse.com/?search=pointer-events - should be good.
.link { display: flex; width: 10ex; height: 20ex; margin-bottom: 1ex; }
.wrapper { display: flex; flex-direction: column; }
.top { border: 1px solid red; }
.bottom { border: 1px solid blue; }
div { flex-grow: 1; }
a.link{ pointer-events: none}
div.top{ pointer-events: auto}
<a class="link" href="about:blank">
<div class="wrapper">
<div class="top"></div>
<div class="bottom"></div>
</div>
</a>
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I'm trying to change the color of a link on hover of a <div>. Is that possible using just CSS? If not, how would I achieve this?
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
You need to style the anchor, not the div. Try this:
div {
border: 1px solid black;
padding: 15px;
}
div:hover a {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
The div itself has no text, so there's no place to apply the color property. So when you hover a div with nothing to color, nothing happens.
As mentioned in another answer, apply the hover to the anchor element, which contains text.
But your original code would work if instead of color you used background-color or border.
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red; /* won't work; nothing to color */
background-color: aqua; /* this will work */
border: 2px dashed #777; /* this will work */
}
<div>
<a href = 'www.google.com'> www.google.com </a>
</div>
rjdown's answer is correct, but the question is if you still need the div at all.
All a div does is provide a block for you to style. If you style the anchor as block, you have just that. Code bloat is bad for your SEO and headache-freeness. ;-)
Try this:
a:link {
display: block;
/* make it act as the div would */
overflow: auto;
/* or what you want, but good practice to have it */
border: solid 1px black;
}
a:hover,
a:focus,
a:active {
border: solid 1px red;
}
<a href='www.google.com'> www.google.com </a>
Remember to use more than a color change on your hover or the 1 in 12 males with color blindness won't see a thing, potentially, happening. The focus and active additions are for accessibility too. Especially focus is very important for keyboard users.
Good luck.
We can simply assign inherit value to all the CSS properties of anchor tag ,
Thus when you hover above its container DIV element , it will inherit all the new properties defined inside DIV:hover.
div {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 100px;
width: 100%;
color: white;
background: blue;
}
a {
text-decoration: inherit;
color: inherit;
}
div:hover {
color: orange;
}
<div>
www.google.com
</div>
I have the following code that sets a class of dragging-something to the html element on a page on a trigger. The class does the following:
html.dragging-something {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
That all works, until I move my mouse over another element that changes the cursor. (Like an input field)
How do I make it so my dragging-something class does not get overridden by anything else that might change the cursor?
jsFiddle (Problem): https://jsfiddle.net/BoxMan0617/jndukr86/
jsFiddle (Solution): https://jsfiddle.net/BoxMan0617/jxesdzqf/ (Thanks to #humble.rumble)
[Solved]
You need to apply it to the elements contained within the HTML tag not just the HTML tag
html.dragging-something * {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
I personally try to avoid using !important as often as I can. Instead I give structuring and specificity of rules a shot: http://jsfiddle.net/vy599pa2/
<div class="move">
<div class="pointer">
</div>
</div>
<div class="pointer">
div {
width: 150px;
height: 150px;
padding: 30px;
background-color: grey;
border: 2px solid black;
}
div div {
padding: 0;
background-color: lightblue;
}
div + div {
margin-top: 10px;
}
.pointer,
.pointer * {
cursor: pointer;
}
.move,
.move * {
cursor: move;
}