I'm trying to create a custom cursor in React, and want the cursor to change in appearance when it hovers over any link on the page.
I can get this to work on a specific single link by using a ref, like so:
<a href="#" ref={myLink}>My link</a>
And then using this to attach event handlers:
myLink.addEventListener('pointerenter', handlePointerEnter); myLink.addEventListener('pointerleave', handlePointerLeave);
But what I want is for the cursor to change when hovering over every possible link on the page, and I won't always have control over the content of this website so adding refs to every link in this way is obviously unrealistic.
Any help finding a better solution would be hugely appreciated!
Edit:
This is the markup for my custom cursor:
<div ref={cursorSm} className="cursor--sm"></div>
<div ref={cursorLg} className="cursor--lg"></div>
I'm using refs there because I'm using gsap to animate it.
You can use the CSS cursor property.
a {
cursor: some-value
}
Related
I have this element with badge and I would like to add onClick on the badge, but in this case the onClick reacts on the text click, how can I do it ONLY for the badge?
<div matBadge="i" matBadgeOverlap="false" (click)="onClick()">Text with badge </div>
This is an issue that was also raised once to the material team back in 2018 on GitHub.
Answer:
Badges are intended to be for displaying information only and aren't meant to be interactive. Introducing interactions on them would lead to accessibility problems, so this isn't something we would support.
Badge elements have the style 'pointer-events: none', which is why you don't get the click events. You can use Javascript to query the inner implementation element and change this style.
So for the following HTML:
<div id="todo-actions" matBadge="!" matBadgeOverlap="false" matBadgeColor="warn"> </div>
this code will do the trick:
const todoBadge: HTMLElement = document.querySelector("#todo-actions .mat-badge-content");
if (todoBadge) {
todoBadge.style.pointerEvents = "inherit";
}
Note that the .mat-badge-content is the inner element created by the matBadge directive. Using #todo-actions .mat-badge-content ensures that the CSS style is changed for the specific badge element.
Finally, if you're using Angular, put the JS code in your AfterViewInit handler.
Only drawback with this approach is that it's susceptible to break if the matBadge implementation changes as that can happen during major framework overhauls.
You could suround the badge by a span and add the click event listener to it:
<div matBadge="i" matBadgeOverlap="false">Text with <span (click)="onClick()">badge</span></div>
My Javascript knowledge is extremely low, so sorry for this stupid question, but I have searched everywhere.
I'm using a single page scrolling script, but trying to add a navigation bar. The documentation references this for changing to a page:
$(".main").moveTo(3);
How do I make a link to run this? I just want a Hyperlink that runs this when clicked, but cannot work out how to do it.
You can use the selector for the hyperlink as
$('a').click(function () {
// paste your function here..
})
You can use a specific selector such as its class as
$('a.move').click(function () {
// function
}
Where its HTML will be as
Click Me
No, you don't. If the hyperlink does not link to a resource, it's not a hyperlink and you should not use the <a> tag. What you're describing is a "click to do something" element, which is the <button> element. Simply use this:
<button onclick="$('.main').moveTo(3)">click this</button>
And then use some CSS to make the button look like whatever you need it to look like (button default styling is just CSS, so turn off the border and background color, and now it looks like plain text)
I am building a WYSIWYG page styling editor with jquery/javascript. I'm trying to provide a way to modify the :hover state of links so my users can change the color, size, weight, etc of links. I know how to apply styling to elements for their default state, but can't find any documentation on how to apply styling to an element :hover state.
Any help out there?
To currently apply anything I am doing the following:
$('#content a').css('color','#ffcc00');
I need to do something similar for a:hover. ie:
$('#content a:hover').css('color','#000');
If you want to make the change using javascript you can attach it to jQuery.hover().
Here's a full working example
$('a.link').hover(
function(){
$(this).css('color',$('input').val());
}
);
I built a WYSIWYG editor and I store the user defined settings in a db so instead of reloading the page after I save their change to the form I update the behavior with javascript.
you can use css like assert your element´s id is
"element1"
css :
#element1:hover {
background-color:pink;
}
Is there a way (possibly using Javascript?) of changing CSS element details when a User clicks an HTML link?
My aim here is to grey out a series of links defined as:
<span>Link</span>
and a class defined as:
.Document
{
background:#000;
}
What I am after is, when the User clicks MyLink, I would like the Document class to change its background to something else.... say #CCC. I would also like it to revert back to its original state when another link is selected e.g. MyLink2.
Is this even possible? If so does anyone know where to look for at least the beginnings of a solution?
jQuery! - http://jquery.com/
$("your-selector").click(function(){
$("your-destination").css("border-color","#CCC");
});
Apply for each link, and it should do it!
<a href="#" title="MyLink" onclick='document.body.style.background="#CCC";'>Link</a>
You could use the :focus CSS pseudo-selector:
a:focus {
background-color: #ccc;
}
Now when the user clicks on a link, the background will go grey.
I assume the .Document classname is applies to a number of other elements & not the link itself.
In this case, the best practice is to create another classname (for example, .document-active), and change the classname on all the elements that .Document is applied to when MyLink is clicked.
Using your markup above (and jQuery):
$(function(){
$("a[title='MyLink']").click(function(){
$('.Document').removeClass('Document').addClass('document-active');
return false;
});
});
I found an anchor plugin for jQuery, and its demo site is at http://www.position-relative.net/creation/anchor/.
I am developing a FAQ page on a website where a list of questions are followed by a list of answers. I could use the scroll effect to move down to the corresponding answer when a user click a question. But I also want the answer is highlighted in some ways or others so that a user can get focused on the answer.
I would like to achieve the effect. Also, if you know any other plugin to do this, please let me know.
As you invoke the anchor plugin using:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate()
});
you could also bind your own function that does the highlighting as so:
$(document).ready(function() {
$("a.anchorLink").anchorAnimate().click(function() {
$('.highlight').removeClass('highlight');
$('a[name='+$(this).attr('href').substring(1)+']').next().addClass('highlight');
});
});
This requires that you have this kind of structure:
Anchor link
...
<a name="foobar"></a>
<div>The content you want to highlight</div>
And in CSS, you just define how you want the highlighted part to look like:
.highlight {
background: #ffc;
}
The jQuery code works so that when you click an anchor link, it first removes current highlights and then applies the highlight class to the element immediately after the link target.
You could expand this functionality by doing some kind of color fade animation like here in SO, but this should get you started.
I'd use jquery.scrollTo personally, to highlight it is pretty simple, just use .toggleclass() on the span/div that wraps the answer.