Onmouseover изменить изображение и цвет шрифта с помощью jquery

0

Я потерял где-то в своем кодировании. Я действительно новый в jquery. У меня есть промежуток, который в моем диапазоне содержит img и font. Я хочу, когда пользователь навещает курсор мыши и отображает изображение и шрифт.

Здесь мой HTML, я должен положить <?php echo $tododetail_id;?> <?php echo $tododetail_id;?> в моем идентификаторе span, потому что это процесс цикла

<span style='float:right;cursor:pointer;' id='delete<?php echo $tododetail_id; ?>'>
    <img id='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;
    <font id='fontdel' style='text-decoration:underline;' color='#BDBDBD'>
    <?php echo lang['DETAIL_REMOVE_CMT_B']; ?></font>
</span>

Здесь мой jquery

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $("#imgdel").attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).attr('src', '/images/reply_icon_disabled.png');      
    });
});

Пожалуйста, помогите мне.

Теги:

5 ответов

2
Лучший ответ

Я вижу одну проблему (помимо использования тега font, это должно быть сделано с помощью css), идентификатор должен быть уникальным. Если вы зацикливаете этот код, у вас будет несколько тегов img с идентификатором "imgdel". Afaik jQuery не вернет список для селектора $ ('# imgdel'), но только первый соответствует. Поэтому я бы попытался изменить php-часть на

<img class='imgdel' src='images/delete_icon_disabled.png'/>&nbsp;

и затем

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).find('img.imgdel').attr('src', '/images/reply_icon_disabled.png');      
    });
});

Надеюсь, поможет

Поделиться
1

использование

 $('#imgdel').attr('src', '/images/reply_icon_disabled.png');

вместо

 $(this).attr('src', '/images/reply_icon_disabled.png');

демонстрация

Поделиться
1

Если у вас повторяющиеся интервалы на странице, ваш html недействителен в том, что элементы img и font не будут иметь уникальных идентификаторов, а затем в вашем JS, когда вы попытаетесь выбрать img с помощью $("#imgdel") это будет просто найдите первый (в большинстве браузеров), а не тот, который вы наводили на себя.

Вам нужно выбрать элементы таким образом, чтобы они относились к определенному диапазону, который был виден. Внутри обработчиков hover this будет ссылаться на рассматриваемый диапазон, поэтому вы можете использовать метод .find() для .find() к img, который содержит этот конкретный диапазон:

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $(this).find("img").attr('src', '/images/reply_icon.png');
    }, function() {
        $(this).find("img").attr('src', '/images/reply_icon_disabled.png');      
    });
});

Если вы это сделаете, вы можете удалить атрибуты id из элементов img и font.

"Я хочу, чтобы пользователь наводил курсор мыши и менял изображение и шрифт".

Вы действительно не говорите, что хотите сделать, чтобы изменить шрифт, но вы можете использовать тот же метод, что и выше, для выбора элемента шрифта, т. $(this).find("font"). (Почему вы вообще используете элементы шрифта? Это 1990-е...)

Также обратите внимание, что ваш код будет более аккуратным, если вы присвоили общий класс вашим элементам span вместо атрибута inline style="..." (вы можете сохранить атрибут id, если это необходимо для чего-то еще), скажите примерно так:

<span class="superSpan" id='delete<?php echo $tododetail_id; ?>'>

И затем добавьте это в свою таблицу стилей:

span.superSpan { float:right;cursor:pointer; }

... и измените свой JS на:

$("span.superSpan").hover(...
Поделиться
  • 0
    хахаха .. в любом случае спасибо .. я знаю, что это действительно старый стиль… так как я действительно новичок в кодировании… так что просто попробуй все, что я знаю… :)
0

Если это жестко закодированное изображение и стиль шрифта. Вы можете справиться с этим с помощью CSS. еще в кратных с jQuery вам нужно попробовать другой метод

Поделиться
  • 0
    «Вы можете справиться с этим с помощью CSS» - Как? «иначе в множестве с JQuery вам нужно попробовать другой метод» - И этот метод будет ... что? (На самом деле этот ответ - скорее комментарий, не так ли?)
0

Попробуйте

$(document).ready(function(e) {
    $("span[id^='delete']").hover(function() {
        $('#imgdel').attr('src', '/images/reply_icon.png');
    }, function() {
        $('#imgdel').attr('src', '/images/reply_icon_disabled.png');      
    });
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню