We Keep Coding

How to disabled style from library css in React

I use the react-slick library to make a slider. I have images inside the tag responsible for the slider. Depending on the size of the screen I would like to hide the images but the property slick.css blocks my css style. How could I turn it off?

You can try to write a more specific css selector.
I assume your image has a class .cHgPZg.
If yes you can try the selector
.slick-slide img.cHgPZg { dsiplay: none; }
If this is not working you can always use the !important; but try to avoid it if possible.
.cHgPZg {display: none !important;} // not recomanded

The issue is specificity. You have to add a more specific selector in order to overwrite the dominating selector and hide the image. Try walking the selector tree backwards until the selector is specific enough; Something like this:
.slick-slider .slick-list .slick-slide img {
display: none;
}

css hover override using only css and JS

I have a code that i can only edit the CSS and the JS. The problem is that the page loads a default css that cannot be altered but you can run an alternative css and JS to add content to a page and modify the css. So i guess the css that is loaded overrides the default one. But the problem is that you can't just say
a:hover {
background-color: red;
}
You would have to reset background color with none and add underline and stuff.
so how can i tell my css to put my *:hover important over any else and remove the default hover?

The css may be too nested. Adding an !important tag would help. But it's more semantic to follow the train of elements. Right click the element you want to style. When you're looking at the editor, you'll see the specificity on the right side (where the css is) and then you can copy the selector they have. Using this selector should allow you to overwrite any styles necessary.
Far top right of the image. The .container is the overall class used here. In some cases you may see something like. (From Foundation)
.top-bar-section li:not(.form) a:not(.button)

Add following in your CSS and make sure you load it after default CSS.
a:hover {
background-color: NONE !important;
}
Using Javascript
$('body').append('<style>a:hover { background-color: none !important; }</style>');

Change the color of "a" tag inside of "li"

I've tried to do it by css, using:
#mainmenu ul li:hover a
{
color: #000000;
}
But it is not working, then i tried using jQuery, with:
function change()
{
$(this).find('a').css('color','#000000');
}
Calling onMouseOver inside the <li>, but it is also not working...
Any idea?

Try with color: black !important and if it works then look for the style overriding it and re-organize your code.

The CSS code posted works when tested with the simplest possible HTML like
<div id=mainmenu>
<ul><li><a href=foo>link</ul>
</div>
and with no other style sheet used. This means that in your real page, there is either some error in HTML syntax or, more probably, some other style sheet rule that overrides this rule.
Thus, you should analyze and modify the style sheets. If you need further help, you should post minimal code that still exhibits the problem.
Using !important can be useful in making sure that it’s not an HTML problem or typo in CSS code, but !important should rarely be used on live pages, especially in cases where you don’t really know how your style sheets work together.

Just try hovering
#mainmenu ul li a:hover
{
color: #000000;
}

I think CSS can handle your problem anyway if you want to solve using jquery you can use this link Jquery Hyperlink Plugins

How should i hightlight any link on mouseover in my page?

I want to highlight all the links in my website when mouse over events happen on them.
I don't want to write the onmouseover attribute in every link I create and there should be some place where I can declare this highlight effect globally.
How should i do this ?

Use CSS. You should use external file if you wnat to make it same for you whole site.
a:hover
{
background-color: rgb(255, 255, 0);
}
You may use class or something else. Such as JS.
But I think the above example would be OK if you want to make it for all links.

You can do this simply through CSS.
<style="text/css"><!--
a, a:visited { color:#AA0000; text-decoration:none; }
a:hover { color:#00AA00; text-decoration:underlined; }
--></style>
Link1<br />
Link2<br />

Something like this should work fairly well:
a:hover {
color: white;
}

If you're looking to do minimal styling on links on events like 'hover', you don't need JS at all:
a { color:blue; }
a:hover { color:red; }
If you're going beyond that and possibly adding balloon style hovers you'll most likely need to rely on Javascript, it might help clarifying exactly what you mean by highlight.

Your best bet is either to write your own selector, or use a selector function in something like jQuery.
That way you can just do a mouseover function on any a element on the webpage.
For more if you want to do it yourself then you can look at the links at the bottom of this page:
https://developer.mozilla.org/En/DOM/Locating_DOM_elements_using_selectors

If you want to expand this to non-anchor tags, use jQuery.
$('div').click( function(){
$(this).addClass("hovered');
} );

jQuery css() function changing 'a' property not 'a:hover' property

I'm having a bit of trouble with the jQuery css() function at the moment. It is changing the css value of the anchor element's border-top-color instead of just the anchor element's border-top-color when hovered. Below is my code.
$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");
Why does it change the #header #headerlist li a border-top-color and the #header #headerlist li a:hover properties rather than just the #header #headerlist li a:hover property?

The reason your example doesn't work is because the selector has no way of detecting :hover since that's a pure CSS thing. Instead you might try using the actual jquery hover method:
$("#header #headerlist li a").hover(
function () {
$(this).css("border-top-color", "#FF0000");
},
function () {
$(this).css("border-top-color", "#000000");
}
);
Alternatively, you could also use the addclass method as well:
$("#header #headerlist li a").hover(
function () {
$(this).addClass('hover-highlight');
},
function () {
$(this).removeClass('hover-highlight');
}
);
This could be further simplified to:
$("#header #headerlist li a").hover(function () {
$(this).toggleClass('hover-highlight');
});

I don't know exactly why, but this type of changes are better done in CSS, so I'd suggest that, if you really need to change this through JS, create a CSS class, then change that in JS.
CSS
#header #headerlist li a.fancy-border:hover{
border-top-color: rgb(225, 149, 79);
}
JS
$("#header #headerlist li a").addClass("fancy-border");
That way you can better separate functionality from presentation.

The reason it doesn't work is because the :hover bit doesn't actually give the selector any information about an element.
a:hover in CSS matches on the same exact elements as a, it's just defining a different set of properties for when the user is hovering over those elements.
The jQuery selector is designed to find (select) elements, not to style them.
The css() method simply sets an inline style on the elements that are selected, it does not add or change any actual CSS declarations.
As other have mentioned, you can use the hover() event to get the same behavior. Although, adding a class on the fly is probably better, as another answerer described.
However, if you don't need to make it change on-the-fly, I recommend using plain old CSS since it is faster and does not require a user to have javascript enabled.

This code is broken since 1.9
if($('...').is(':hover')){
$(this).css('set','your styles here')
}
use this instead
var class = '...';
if($(class+':hover').length>0){
$(class).css('set','your styles here');
}

add !important to the hover css to avoid the style is overrided.
for example:
test:hover {
border: 1.5px solid white !important;
color: white !important;
}