0

Мне нужно сделать js, чтобы когда наводите мышь на фотографию, менялся цвет бордюра (а когда покидаете фотографию, возвращался обратно цвет, который был). Я это успешно сделал:

$('.logo_js').hover(function () {
    $(this).css({
        "border-color": "#FF80FF"
    });
}, function () {
    $(this).css({
        "border-color": "#DFDFDF"
    });
});

Но мне нужно сделать так, чтобы при нажатии пользователем на фотографию цвет становился зелёным. У меня это не работает, так как при потере фокуса цвет возвращается на #DFDFDF.

Как сделать так, чтобы цвета менялись при наведении, а при нажатии цвет бордюра становился зелёным?

3 ответа 3

0
$('.logo_js').hover(function () {
    if ($(this).hasClass('clicked')) return;
    $(this).css({
        "border-color": "#FF80FF"
    });
}, function () {
    if ($(this).hasClass('clicked')) return;
    $(this).css({
        "border-color": "#DFDFDF"
    });
});
$('.logo_js').on('click', function() {
  $(this).toggleClass('clicked');
});
// css: .logo_js.clicked { border-color: #00ff00; }
0
$('.logo_js').click(function () {
    $(this).css({
        "border-color": "#зеленый"
    });
    }

может так?

но нужно проверять чтобы после нажатия, не срабатывал hover

Ну при клике на фотку можно добавить ей класс, допустим "hoveroff" тогда при

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

Проверять есть ли у logo_js стиль hoveroff, если есть то ничего не делать, а если нет то делать. собственно убрать этот стиль повторным нажатием на фотку.

2
  • а как сделать, чтобы после нажатия не срабатывал hover 20 апр 2012 в 13:32
  • обновил ответ
    – Artem
    20 апр 2012 в 13:50
0

Гуглим CSS, в особенности a:hover, a:active и a:visited.

ОБНОВЛЕНО

css тут не нужен!

Я бы сказал, что js тут не нужен. ;) Ок, вот еще вариант.

html:

<a class="someclass clickOnce"></a>

css:

.someclass{border-color:green}
.someclass:hover, .clickOnce:hover{border-color:red}
.clickOnce{border-color:blue}

js:

$('.clickOnce').live('click', function(){$(this).removeClass('clickOnce');});
1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.