css через js

в целом подход у вас странный.

Может как-то без костылей попробуете решить задачу?

В дальнейшем нужны будут вычисления. Что бы не создавать отдельный стиль для каждого класса решил проводить вычисления через js. А как иначе то?

$('.q').mouseover(function()
{
	$(this).css('width', 58 * ' 1 ' + '%');
});

$('.q').mouseout(function()
{
	$(this).css('width','12.5%');
});

dma84, спасибо!

Не успел, пока писал 🤣 Я через ховер только...

$('.q').hover(function(){
$(this).css('width', 58 * ' 1 ' + '%');
},function(){
$(this).css('width', '12.5%');
});

А скажите на мобильном будет такой код работать?

По клику вроде работает мой код...

ziliboba0213, отлично.

Может (раз уж используете transition) как-то так: http://jsfiddle.net/JpKfJ/ - CSS псевдоклассы :hover, :active и :checked

А не подскажете напоследок почему так не работает?

$('.q1', '.q2').css('width', 12.5 * ' 1 ' + '%');

Нужно для нескольких классов задать одно значение ширины.

А то так как то громоздко

$('.q1').css('width', 12.5 * ' 1 ' + '%');

$('.q2').css('width', 12.5 * ' 1 ' + '%');