Is there a way to use an SVG image as the mouse cursor when hovering over a specific div? I've been trying to make it work by adding this line of code:
cursor: url(http://elusivethemes.com/assets/down.svg), auto;
Unfortunately, it doesn't seem to be working for me. Oddly enough, it does work if I try using a different SVG image from a different URL.
Any suggestions or insights into why this might be happening?
Thank you in advance!
As stated on the Mozilla Developer Network
Gecko started supporting the SVG image format for cursors with version 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1). However, it is important to note that the SVG image must have a length-valued height and width on its root SVG node, not percentage-valued. Features like JavaScript, CSS animation, and declarative SMIL within an SVG image are disregarded; animated cursor creation using SVG is not possible.
Therefore, it is necessary to explicitly specify the height and width in your .svg file.
The provided .svg file does not have any dimensions declared, as shown below:
<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" viewBox="0 0 320.995 320.995" x="0px" y="0px" height="200" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" viewbox="0 0 320.995 320.995" version="1.1">
If you include the width and height attributes, everything should work properly.
Just remember not to use percentages when declaring the dimensions
Within an anchor tag, I have a div element. The CSS on the :active state is set to transform the element, but I want to avoid this behavior when focusing on the child element bx--overflow-menu. I am working with NextJS using styled-jsx and SaSS. Here is my ...
I'm struggling to figure out the correct way to write this script. Can someone please guide me in the right direction or suggest an alternative method? I've searched but haven't found any relevant examples. I am fetching information from a ...
Essentially, my issue stems from having a scrollable list with a set maximum height of '100vh'. I also have a detail card beside the list that contains accordion components. When one of these accordions is expanded, it increases the height of the ...
Is there a way to display multiple popovers at once when hovering over text, similar to the example provided in this link? I attempted the following method, but it wasn't successful. <div class="row"> <div class="col-md-12"><br/&g ...
I'm looking to start customizing a Sencha 4 Tree panel, adjusting elements like text size and background colors. So far, I haven't been able to figure out the right approach, whether it's through viewConfig or some other method. Here's ...
I need to change the color of an iconic button when it is clicked. The default color is the primary color, but when the button is clicked, it should change to red. This functionality is working correctly. After clicking the button, two hidden buttons shoul ...
I need help with customizing scrollbars. How can I hide the scrollbar when it is not needed due to short content? Below is the code snippet I have been working on: .myscroll::-webkit-scrollbar { width: 15px; } .myscroll::-webkit-scrollbar-track ...
I am struggling to replace a background image in CSS with an icon font instead of an icon image. I have been unable to accomplish this task. Here is the CSS property I am working with: .social-networks .twitter{background:url(../images/social/twitter.png) ...
What specific ID should I use to block my Bootstrap Modal with AdBlock Plus? I want AdBlock Plus to block it for users who have it installed and are using it. I don't want to be overly intrusive by trying to circumvent ABP. The only reason I am using ...
I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...
var container = document.querySelector(".container") var light2 = document.getElementById("light"); var dark2 = document.getElementById("dark"); light2.addEventListener('click', lightMode); function lightMode(){ contai ...
For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...
My goal was to dynamically retrieve SVG icons, and I discovered a method to achieve this. However, it seems like I have made some errors along the way. Can you point out where I am going wrong? Icon.js import React from "react"; import { ReactCo ...
I'm looking for a way to display a label on an input field and have a writing cursor show up when hovering over the label. I am not interested in using a placeholder label. Do you have any simple solutions for this? See the code snippet below: JSFiddl ...
For the past day, I've been tackling a challenge with my online shop project. On the specific item's page, I want to include a fixed [add to cart] button as a footer initially, which then becomes sticky when scrolling to a certain point. You can ...
I have looked at other questions with similar issues and it appears that what's missing in their code is: <meta name="viewport" content="width=device-width, initial-scale=1"> However, I already have this code implemented but still facing probl ...
I have encountered an issue where table data loads briefly and unformatted before jquery DataTables kicks in. After doing some research, I found that many suggest hiding the table using CSS and then showing it using jQuery with initComplete. However, des ...
One of the challenges on my website is customizing the navigation bar to resemble the BBC navigation bar. I want to change the border bottom/underline color using transition elements. Can anyone provide guidance on modifying the code to achieve this look? ...
Perhaps the most straightforward way to demonstrate this is by providing a direct link to the website where the addition should be made. I am in desperate need of a basic footer that remains fixed at the bottom of the page, regardless of the amount of con ...
Is there a way to split two divs like this in such a manner using TailwindCSS? Alternatively, what would be the CSS code for dividing these two divs? I am struggling with this concept and cannot wrap my head around how it can possibly be achieved. ...