Is there a way to add an underline in text-decoration when hovering over the text? I've tried the code below but it doesn't seem to be working.
<span
style={{
color: "red",
cursor: "pointer",
"& :hover": {
textDecoration: "underline"
}
}}
>
Click this.
</span>
The style property does not have support for selectors.
To properly implement your styling logic, it is recommended to transfer it into a <style> element or a linked stylesheet <link>.
There are numerous React-friendly libraries available that can assist in generating styles dynamically. An example of this is Styled Components, which is well-known for supporting the SCSS syntax you are utilizing (with the exception of an extra space after the &).
import { styled } from 'styled-components';
const MySpan = styled.span`
color: red;
cursor: pointer;
&:hover {
text-decoration: underline;
}
`;
Following that,
<MySpan>Click this.</MySpan>
However, it should be noted that span elements are not intended for interaction. They are not identified as clickable by screen readers and cannot be tabbed to without using a mouse. This presents a significant accessibility obstacle. If there is a need for users to interact by clicking on something, it is advisable to use a link (if directing somewhere) or a button (for other interactions).
As discussed in this article:
There has been a strong argument against using react inline styles, citing the lack of support for CSS selectors like ":hover", ":active", ":focus", ":before", ":after", media queries, and SCSS syntax.
The recommendation here is to stick with using a CSS file and applying styles through classes instead, for example with class:hover.
give this a shot, I gave it a try and it actually does the trick.
Here is the code in App.js:
import "./styles.css";
export default function App() {
return (
<div className="App">
<span
style={{
color: "red",
cursor: "pointer"
}}
>
Click here.
</span>
</div>
);
}
And in style.css:
.App {
font-family: sans-serif;
text-align: center;
}
span:hover {
text-decoration: underline !important;
color: "red";
}
I recently integrated Parcel Bundler to bundle my client files for React Server Side Rendering. After setting up the Parcel Middleware and specifying the location of my client entry point, I noticed that although Parcel was bundling my files, the ReactDOM ...
After creating "create-next-app," I successfully set up the folder structure as follows: +client2 --.next --node_modules --public --... --server.js However, when I move my "server.js" file to a different location: +client2 --.next --no ...
I am attempting to showcase a png graphic on a react-map-gl map, following the approach outlined here. Unfortunately, the image is not appearing as expected and no error messages are being generated for me to troubleshoot. Below is the snippet of code I&a ...
When creating a webpage, it's important to minimize "layout thrashing" or "reflow", which occurs when the browser recalculates the dimensions and positions of all elements on the page. Paul Irish has compiled a valuable list of processes that trigger ...
In order to establish a successful connection between the express backend and MongoDB database, I initially used fetch("/") from the frontend, which returned the index.html code. However, when I switched to fetch("http://localhost:9000"), I encountered a C ...
I have been tasked by my mentor to create a website based on a wireframe that he sent me. However, I am facing difficulty in positioning the text on these "hero" images. https://i.sstatic.net/Xw19o.jpg https://i.sstatic.net/uBdaa.jpg The text seems to be ...
I am having an issue with my drop down menu links - they are not clickable. Every time I try to click on them, the menu just closes back to its original position and nothing happens. If you want to see the issue, you can check out my fiddle here. EDIT: T ...
Currently, I am working with reactjs and mobx. My situation involves an observable array composed of Item objects that I aim to display while showcasing live property changes by observing the properties on the objects within the array. These changes do not ...
I have two lists which are currently using jQuery for functionality. An example can be found here. I need the same basic functionality but with some modifications: Instead of just getting all sortable items by clicking "Get items," I want to be able to dr ...
One thing I noticed is that when placing an absolutely positioned element within a relatively positioned element, the latter does not automatically inherit the width and height of the former unless manually set. Take this example: <!DOCTYPE html> ...
I am trying to find the two smallest numbers out of a set of three, and then I want to display them on the screen. In PHP, we usually use echo to display values on the screen. However, with this code snippet, I am only able to get one smallest value instea ...
As a beginner in Javascript and jQuery, I am struggling to understand why my code is behaving the way it does. I have written two similar functions aimed at changing the background color of an input field. The objective is to set the background color of t ...
[Update] I encountered the following issue: I once had a website. It functioned well, except when opened in a new tab with target "_blank." When accessing the site directly, everything appeared normal enter image description here However, when accessed ...
Hey there! I'm currently facing an issue with fetching data from my Sanity CMS and passing it as props to a child component. Interestingly, the same code worked perfectly on another screen, but here I seem to be encountering an error. Although the dat ...
Greetings! I am encountering an issue while trying to run my webpack (task runner). Click here for the development image I want to mention that I have also installed npm. Below is the configuration of my webpack: "use strict"; const path = require(&ap ...
The current code I have is producing this result. Visit the website I am looking to modify the color of: the three bars Is there a way to do this? I used the nav element for this. Even though I already have custom CSS for navbar colors, I am unsure ho ...
This issue could be related to extensions or the VS Code settings configuration, as I have never encountered it before. All files are being randomly listed as untracked. Current Version: 1.86.2 (Universal) To visualize the problem, here is an image: ht ...
Currently, everything runs smoothly when using the npm run dev script. However, I am facing an issue where images in testimonials.avatar do not display when using the npm run build command. const Testimonials = ({ testimonials }) => { return ( < ...
This straightforward example can be viewed in the following codepen link: http://codepen.io/anon/pen/Mazjyv. It showcases a button that acts as a flex item with a flex-basis set to 0%. While other browsers handle the content within the button container wi ...
I have recently made the switch from MUI version 4 to version 5, but my app's appearance has taken a turn for the worse! One major issue I am facing is that many of the theme properties seem to be overridden by the default values. Take this example th ...