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 that you have read and understand our privacy policy and code of conduct.

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