Here is the scenario I'm dealing with:
HTML
.input {
color: red;
}
.input:not(:disabled, :read-only):hover {
color: blue;
}<input class="input" type="text" value="Hello">
<div class="input">Hello</div>It's interesting that the hover effect doesn't work on the div element, but if I take out the :read-only part from the css, it does.
I wonder why this is the case? 🤔
The selector you are using, :not(), operates on an AND logic basis where both requirements must be true. In this case, the conditions are :not(:disabled) and :not(:read-only). Since the second condition is not met by the div (only the input), the hover effect will not take place.
If you make the div editable, it will behave similarly to the input element.
.input {
color: red;
}
.input:not(:disabled, :read-only):hover {
color: blue;
}<input class="input" type="text" value="Hello">
<div class="input" contenteditable>Hello</div>When utilizing the read-only selector, keep in mind that it doesn't exclusively target input elements; it also applies to any element that the user cannot edit, such as a div.
In a response by @TemaniAfif, the use of contenteditable allows for making the div editable while supporting both the read-only and disable attributes. If you prefer not to go this route (perhaps due to control by JQuery or another framework), employing classes is an alternative approach:
.input {
color: red;
}
input.input:not(:disabled, :read-only):hover,
.input:not(input, .disabled, .read-only):hover {
color: blue;
}<input class="input" type="text" value="input">
<input class="input" disabled type="text" value="disabled input">
<div class="input">div</div>
<div class="input disabled">disabled div</div>
<div class="input read-only">read-only div</div>The :not() pseudo-selector does not work with 2 declarations as you may have intended. Instead, use two complete selectors to achieve the desired effect.
.input {
color: red;
}
.input:not(:disabled):hover,
.input:not(:read-only):hover {
color: blue;
}<input class="input" type="text" value="Hello">
<div class="input">Hello</div>Greetings! I work as a UI developer based in South Korea. Recently, I've been facing an unusual issue on my M1 MacBook. Sometimes while typing text, an error message pops up saying "BS" like in the screenshot attached below. I have tried searching fo ...
Trying to integrate HTML code received from an API into my VueJS code. The API provides the following: <p>blah blah blah</p> <ul> <li> 1 </li> <li> 2 </li> </ul> Saving this code snippet into a variable, but ...
Can the width of a scrollbar on a <div> element within the <body> be increased? I mean the scrollbar specifically on the inner <div> element, not the default browser scrollbar since this page is in full screen mode and does not display t ...
I am currently working on a sophisticated application that includes several drawers. Specifically, I am encountering an issue with the animations of the right side drawer. While the drawers animate correctly, the parent divs do not seem to follow suit. Eve ...
Looking to create a unique shopping cart similar to the one featured on netTutsPlus, but encountered compatibility issues with Chrome and Opera when implementing the drag and drop feature. In search of a solution that will work seamlessly across both brow ...
I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead. <div * ...
When I added a caption to my image, it only appeared when hovering over the symbol in the image. However, this feature doesn't work on mobile or tablet due to the image size. How can I make the caption appear when the image is clicked on mobile/tablet ...
I am attempting to add CSS styles to app.component.ts using the :host property, but I am not seeing the desired results. The CSS is being applied, but not correctly. .ts export class AppComponent { title = "Default Title" data = 'This is defaul ...
I'm on the lookout for a JavaScript library that can handle Word Documents (.doc and .docx) like pdf.js. Any recommendations? UPDATE: Just discovered an intriguing library called DOCX.js, but I'm in search of something with a bit more sophistic ...
I'm currently utilizing a map script created by Derek Ender that integrates with Google Fusion Tables to display locations on a map. While the script is functioning well, I have received a request to make the sidebar list of locations clickable. The ...
My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...
I am working with two buttons in a Javascript carousel and need to prevent users from double-clicking on the buttons. Below is the code I am using: var onRightArrow = function(e) { if (unitCtr<=unitTotal) { unitCtr++; TweenLite.to(p ...
Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...
Working on PHP and facing a challenge - How can I restrict a user to upload only three images in a month? The MySQL Database table structure is as follows: CREATE TABLE `images` ( `id` int(40) NOT NULL, `user_name` varchar(40) NOT NULL, `mobile` va ...
Struggling to choose an option from a drop-down that contains a div tag instead of the usual select tag. While my code successfully opens the corresponding div, it fails to select the desired element. Here is the snippet of HTML tags: <div id="selecta ...
I have been developing a SASS code to generate CSS output that has the following format. background: -webkit-linear-gradient(top, 50%); background: -moz-linear-gradient(top, 50%); background: linear-gradient(top, 50%); This is the SASS mixin code I cr ...
Ensuring that both <script src="hammer.js"></script> and <script src="../jquery.hammer.js-master/jquery.hammer.js"></script> have been correctly included in my header. I have a mouse click-triggered AJAX event for dynamic and depen ...
I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...
Our project utilizes HTML with the mdb.min.js library, which converts all <select> tags to <ul><li> format. An issue arises when setting a piece of HTML code via AJAX in a div element. In this scenario, select boxes do not appear as they ...
Can anyone offer guidance on creating a website with a layout like Stack Overflow's, featuring a fixed top menu bar and a content body that reloads? I attempted using ajax .load() to load content into the main area, but I encountered JavaScript functi ...