jQuery

Почему код не работает!? Ошибок нет... А работать не хочет...

$('.wrappZametka').hover(function()
{

var a=$('.wrappZametka').attr('id');

$(".contMenuZametka[id=' "+a+" ']").css('transition','1s');
$(".contMenuZametka[id=' "+a+" ']").css('opacity','1');

},function(){
$(".contMenuZametka[id=' "+a" ']").css('transition','1s');
$(".contMenuZametka[id=' "+a+" ']").css('opacity','0');
});
Во-первых, такие задачи решаются на чистом css, без необходимости подключать джаваскрипт.

Во-вторых, в jquery можно передать сразу несколько атрибутов в метод css(), нахрена плодить копипасту?

В-третьих, id - это УНИКАЛЬНЫЙ идентификатор элемента. То есть, на странице не может быть двух элементов с одинаковым id.

Ну а теперь самое главное: ты определяешь переменную а только в первой функции, передаваемой в hover().
Нет Имени
Нет Имени
51 868
Лучший ответ
Вася Лемак я в курсе так-то что на чистом css прописываются такие вещи... дел в том, что я php скриптом вывожу материалы на странице. Каждый материал обернут в блок с уникальным ID. Как на чистом CSS прописать понять не могу! Нет описывать на CSS я описывал, но при наведении тогда появляется меню на всех материалах выведенных скриптом. А надо на определённом! Поэтому, пока и пришёл к выводу что данную ситуацию поможет разрулить лишь jquery. Хотя может я и не прав! И этом можно всё же на CSS также решить!?
Слушай, если .contMenuZametka лежит внутри .wrappZametka и при наведении курсора на .wrappZametka надо показать все .contMenuZametka лежащие внутри него, то (а если они не лежат внутри, то тут проблемы твоей верстки, положи их туда, а если надо показать только часть, то пометь их как-то и добавьте в селектор jQuery):

.contMenuZametka {
transition: 1s;
opacity: 0;
}
.wrappZametka:hover .contMenuZametka {
transition: 1s;
opacity: 1;
}

А почему у тебя не работает, я тебе объясню: смотри, у тебя несколько блоков с классом .wrappZametka и ты с помощью получения в константу "var a" id блока пытаешься выцепить нужный тебе, НО ты выцепляешь первый в списке ПЛЮС ко всему этому hover вешается только на один блок, нужен on, но в нем нет hover, а событие на вход мыши и выход, так что...
Вот как решить проблему твоего скрипта:

$(document).on({
mouseenter: function () {
$(".contMenuZametka#"+$(this).attr('id')).css({'transition': '1s', 'opacity': '1'});
},
mouseleave: function () {
$(".contMenuZametka#"+$(this).attr('id')).css({'transition': '1s', 'opacity': '0'});
}
}, ".wrappZametka");

Обрати так же внимание на то, что в $(...).css мы можем передавать массивы, т. е. не:
$(".contMenuZametka[id=' "+a" ']").css('transition','1s');
$(".contMenuZametka[id=' "+a+" ']").css('opacity','0');
а легко и просто:
$(".contMenuZametka[id=' "+a" ']").css({ 'transition':'1s', 'opacity':'0' });
Страх, кто так пишет код??? делайте рефакторинг и все заработает....

.cssclass{
opacity:0
}

$('.wrappZametka').hover(function()
{

var a=$('.wrappZametka').attr('id');
var b= ".contMenuZametka[id=' "+a+" ']";
$(b).addClass('cssclass');
},function(){
$(b).removeClass('cssclass');
});

Примерно так