We Keep Coding

How to change CSS over selected element only using $(this)

I'm trying to make it where when the user .mouseover() the .featured_products the .featured_products, and the .button will apply the CSS affect to the selected container. The problem i'm encountering is it changes the .css of both the .feature_products containers. I'd like it to only change the one that's being .mouseover(). I tried using $(this) but i'm not understanding it correctly.
$(".featured_products").mouseover(function(){
$(".fp_button").css("background-color", "#00addc");
$(".fp_button").css("color", "#FFFFFF");
$(this).addClass("fp_hover");
});
$(".featured_products").mouseleave(function(){
$(".fp_button").css("background-color", "white");
$(".fp_button").css("color", "#000000")
$(".featured_products").removeClass("fp_hover");
});
Here is my Demo

You can use the second parameter in the selector to denote a parent, like:
$(".fp_button", this).css("background-color", "#00addc");
See it here: http://jsfiddle.net/4417zugn/31/
You can also do something like:
$(this).find(".fp_button")...
etc. There are many ways.
One thing I'd suggest is to change the class name instead of modifying individual CSS rules, like this: http://jsfiddle.net/4417zugn/33/
Last thing, this is all possible using only CSS, like this: http://jsfiddle.net/4417zugn/35/

There's no need to use jQuery to alter the CSS you can do that in the CSS itself using the :hover selector. You can then use jQuery to toggle the 'fp_hover' class.
$('.featured_products').hover(function(){
$(this).toggleClass('fp_hover')
})
https://jsfiddle.net/Lozgnz84/

$(".fp_button") is common for both the divs; so
instead of writing:
$(".fp_button").css("background-color", "white");
Write:
$(this).find('.fp_button').css("color", "#FFFFFF");
Hence, your code becomes
$(".featured_products").mouseover(function(){
$this = $(this);
$this.find('.fp_button').css({"background-color":"#00addc", "color":"#FFFFFF"});
$this.addClass("fp_hover");
});
$(".featured_products").mouseleave(function(){
$this.find('.fp_button').css({"background-color":"white", "color":"#000000"});
$this.removeClass("fp_hover");
});
demo here: http://jsfiddle.net/znnamrwn/

What you've described can be done without jQuery. If however you would like to use jQuery you could simply toggle a class on the product element.
$('.featured_products').on({
mouseenter: function() {
$(this).toggleClass('fp_hover');
},
mouseleave: function() {
$(this).toggleClass('fp_hover');
}
}, '.featured_product');
http://jsfiddle.net/bradlilley/uwxsr4hu
You can also do the above without jQuery by simple adding the following hover state in your css.
.featured_product:hover .fp_button {
background: #f00;
color: #000;
}
https://jsfiddle.net/bradlilley/9mwxo9o2/6/
Edit: You should also avoid using mouseover and use mouseenter instead.
Jquery mouseenter() vs mouseover()

How to add classes from a selector string?

I have several CSS classes in the form of a selector, for example .myclass.myclass2 and I want to apply both classes to an element.
I could .split() the string and apply each class with .addClass(), but before I do, I'd like to know if there's a "native" jQuery function to do this kind of thing or if someone has written a function to handle it.
To better explain: I want a function that I can pass it a CSS selector and it'll add the classes to an element. Like $('#myelem').addClass('.myclass.myclass').
(I would also love it to handle other CSS selectors such as #myid, but I fear that's asking too much and I'd probably need a full parser function.)

addClass takes a space separated string, so all you need to do is replace dots with spaces:
var classes = '.myclass.myclass2';
$(element).addClass(classes.replace(/\./g,' ').trim()))

You can add this to your script:
$.fn.oldAddClass = $.fn.addClass;
$.fn.addClass = function(x){
if(typeof x == 'string'){
this.oldAddClass(x.replace(/\./g, ' '));
}else{
this.oldAddClass(x);
}
}
Then call addClass() with your dot :
$(el).addClass('.class1.class2');
Fiddle : http://jsfiddle.net/8hBDr/

create two classes inside style tag like this
.a {
backgroud-color:red;
}
.b{
color:blue;
}
</style>
now add your jquery codes
then inside javascript code
<script type="text/javascript">
$(document).ready(function(){
$('#mydiv').addClass(a).addCLass(b);
or
$("#mydiv").addClass({a,b});
or
$('#mydiv').addClass(a);
$('#mydiv').addClass(b);
});
</script>
here is the html
<html>
<body>
<div id="mydiv"></div>
</body>
</html>

You cannot add css selectors (like #elemid.myclass) directly to an element in native jQuery. The example below shows how to add multiple classes using a space delimited string.
$(elem).addClass("myclass mycalss2")
And the documentation:
http://api.jquery.com/addClass/

hide() and show() method when a class selector returns 2 elements

I have a class selector that is returning 2 elements. I did a console.log() and it is an array where 0 is the first and 1 is the second element.
I need to show()/hide() these elements depending on a condition.
I tried doing,
mySelector[0].hide()
mySelector[0].show()
mySelector[1].hide()
mySelector[1].show()
I also tried,
mySelector.first().hide()
mySelector.first().show()
mySelector.last().hide()
mySelector.last().show()
Both approaches did not work. Also, I understood that even css() cant be applied with display: none. What should be my approach to achieve this?

Given the following that matches two elements:
var mySelector = $(".pre.fileContent")
if you want to show (or hide) both:
mySelector.show();
if you want to show (or hide) one of them:
mySelector.eq(n).show();
where n starts from zero.

$("mySelector:eq(0)").hide();
$("mySelector:eq(1)").show();
you can use this

you can use jQuery method with class name.
for eg.
HTML
<div class="mySelector"></div>
<div class="mySelector"></div>
<div class="submit">CLICK</div>
CSS
.mySelector{border:2px dashed green; height:100px; width:100px;}
jQuery
$(".submit").click(function(){
$(".mySelector").toggle();
});
Live fiddle here

Hover all element in html

Is there any way to add hover on all elements in html (div,p,span,a...) I'm trying like this:
$("*").hover(
function () {
$(this).addClass('hover'); ;
},
function () {
$(this).removeClass('hover');
}
);
and CSS
#hover {
background-color:#CC0000;
}
but somewhere there is an error???

You should be using a . rather than a # to denote a class selector.
.hover {
background-color:#CC0000;
}
Also, note that using * as a jQuery selector will select everything, including the body element etc. I'm not sure from the context of the question whether this is what you're after or not.
Furthermore, it would be easier to just use the CSS pseudo-class :hover to apply a style to a hovered element. Here's a reference for how to use it: http://reference.sitepoint.com/css/pseudoclass-hover

You adding class "hover", but using CSS # selector for ids, use .hover instead of #hover

jlis solution will work, but there is a better way:
Use the css pseudo class ":hover" instead:
*:hover {
background-color: #CC0000;
}
should work with most common and actual browsers.
(IE 6 is not an actual or common browser!)

How to add `style=display:"block"` to an element using jQuery?

How to add style=display:"block" to an element in jQuery?

$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });

There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");

Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()

If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.

If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this: