applying css value right after some value

Question

I have styled my css like this

.mycss{border: 2px solid; background: url("") no-repeat;}

how could I add #f00 right after solid and right after no-repeat with a space with jquery?

Edit What if I would like to edit my css with js?

Where is your CSS? In the document itself or in a stylesheet? And why are you parsing/adapting your styles with JavaScript/jQuery? — David Thomas
– David Thomas, Commented Jul 7, 2013 at 10:26
then you can add a style tag with jquery for examlpe: $('head').append(<style type=..>your css goes here</style> — Homam
– Homam, Commented Jul 7, 2013 at 10:46

Homam · Accepted Answer · 2013-07-07 10:33:08Z

1

You can simply use this:

.mycss:hover{border: #f00; background-color: #f00;}

and it will do what you want you can add it rightin your css or your html page as a style tag there is no need to use js or jq for this, and it will add them to this css because you are adding something not editting :D

answered Jul 7, 2013 at 10:33

Homam

7062 gold badges9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhojendra Rauniyar Over a year ago

background: #f00; will override the image.

Homam Over a year ago

then you can be more specific: background-color: #f00;

Pavel Horal · Accepted Answer · 2013-07-07 10:35:52Z

0

Use specific CSS properties for color:

background-color: #f00

That will not override background-image or background-position. For border there is border-color property.

answered Jul 7, 2013 at 10:35

Pavel Horal

18.3k3 gold badges70 silver badges93 bronze badges

Comments

krishwader · Accepted Answer · 2013-07-07 10:41:44Z

0

As others mentioned, css is the way to go. But, if you still want to use jQuery, here's a way you could do this.

Add a class with the styles you want to add when hovering.

.onHover {
    border-color: #f00;
    background-color : #f00
 }

Then you could use the hover event of jQuery and toggle the class whenever hovering.
```
 $(".mycss").hover(function () {
   $(this).toggleClass("onHover");
 });
```

Demo : http://jsfiddle.net/hungerpain/gU7Zp/

answered Jul 7, 2013 at 10:41

krishwader

11.4k1 gold badge36 silver badges52 bronze badges

Collectives™ on Stack Overflow

applying css value right after some value

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related