I have an unordered list with anchor (<a>) tags and I need to apply some style based on what link the mouse is hovering.
Is there a way for me to access the classes of the element that is being hovered?
You can create an Item component that insides manages state to see if the rendered item is being hovered or not with the onMouseEnter and onMouseLeave functions. But since you are trying to modify the styling of the elements for such basic action as being hovered, you should keep with just CSS, targeting the HTML element with :hover selector.
In the first approach every Item component will have that state so then in the style={} you can do style={isHovered ? {background: "red"} : null} supposing you have an isHovered state.
I would recommend you styled-components, they are great.
In ReactJS the events have name like onMouseOver, you can see other events here.
For your case you can write like below:
<a onMouseOver={() => { console.log('hovered') }}> ~~~
If you want to apply a style to an element on hover, use the :hover CSS selector...
#mydiv:hover {
background-color:red;
}
<div id="mydiv">Text to hover on!</div>
If you can change the CSS only to get the style changes you want, that's ideal compared to using code to change the styles. With a 100% CSS solution, there's other advantages....
You can have people who only know CSS maintain and update the code.
You can disable styles without disabling code.
You can update styles without breaking code.
A CSS checker will catch issues in a .css file that would be missed if they were encoded in raw JS.
Source: MDN Documentation - :hover
Related
I'm struggling to use CSS Keyframes with React.
I can get them to work when the component is mounted but when the component is unmounted the CSS transitions don't get a chance to animate before the state removes it from the DOM.
I'm not keen on doing this with a JS library when it feels like there should be a way to do this with good old CSS.
I've got a codepen that I put together to show what I've got so far.
https://codesandbox.io/s/react-hooks-usestate-forked-dhvu7?file=/src/styles.css
At the end of the animation I'd like the component to be unmounted I don't want it to stay in the dom.
Thanks in advance.
You can use css keyframe and use onAnimationEnd event handler to trigger state change after the animation is finished. Also you can add style={{ animationFillMode: "forwards" }} to the node to preserve the CSS properties of the last keyframe before removing it from the DOM.
Example:
{removeDom && (<button
style={{ animationFillMode: "forwards" }}
className="some animation class"
onAnimationEnd={()=>setRemoveDom(true)}
/>)}
For anyone else wanting a solution this article got me to where I wanted to be
https://czaplinski.io/blog/super-easy-animation-with-react-hooks/
I am using react-syntax-highlighter and I am having one problem I am trying to write some styles inside jsx namely paddingLeft: 0. But the problem is that the syntax theme is specified inside style, it looks like this
<SyntaxHighlighter
language="javascript"
style={docco}
wrapLines={true}
showLineNumbers={true}
codeTagProps={{style: {fontFamily: "inherit"}}}
>
{codeString}
</SyntaxHighlighter>
Please pay attention to the code style={docco}, inside style i want to apply paddingLeft but don't quite understand how
In react-syntax-highlighter they provide a property name customStyle it will be combined with the top-level style on the pre-tag, styles here will overwrite earlier styles.
customStyle={{paddingLeft:100}}
<SyntaxHighlighter
language="javascript"
style={docco}
customStyle={{paddingLeft:100}}
wrapLines={true}
showLineNumbers={true}
codeTagProps={{style: {fontFamily: "inherit"}}}
>
{codeString}
</SyntaxHighlighter>
I suggest starting your application on a browser and using an inspect element tool on the component you are trying to change. Once you find the element look for its class name or id. it can possibly be a very long class name. but once you find it target that class name on a separate css file or if you dont want to make a css file you can set it as an ID on the component. If the class name is really long and spaced out. for example class = "container wrapper spacer element" you will target it like this: .container.wrapper.spacer.element {padding-left: 0;}
So based on what you already said to #Zaf
The only way you could possibly override it is by either
Increase the specificity of your styling. There's an order to the way CSS styles are written. So for example, ID's have a higher precedence over classes so the styles get override by the styles applied to the ID.
Use the !important tag (Highly inadvisable but use as an absolute last. resort)
Now. Since the styles you're talking about are applied as inline styles, the only possible way you could override them is by using the !important override to your styles.
So you'd have to include it in your CSS sort of like this.
.something{
background-color: #202020 !important;
}
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
I have a DIV that is set do display:none from CSS and it's supposed to be made visible (style.display = '';) at some point by javascript.
The problem is that if I put the display:none in the CSS file the javascript does not seem to have any effect. I have also tried changing the background color instead of the display property, and that works.
I have the code running here (just press the edit link).
I really thank you for taking the time to look into this.
Set it to block or inline using Javascript.
Writing style.display = "" will clear any display set in the inline style, and cause it to revert to whatever it inherited from CSS.
Alternatively, you can change the element's className using Javascript so that the CSS rule no longer applies.
This is because style.display = '' only affects inline styles on an element. It doesn't change the style sheet.
You should set it to whatever display you need:
style.display = 'block';
or add a class that represents the style you want.
other way to hide content is use opacity=0 and to again make visible use opacity=1 thats it....!!!