VPF::Jquery UI: resizable и hover - Форум программистов

railist

Дата 3.4.2013, 15:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 12.10.2010

Репутация: нет
Всего: нет

Столкнулся с такой проблемой: вот есть у нас картинка

Код

<img src="images/2.png" id="image">

делаем возможность изменения размера картинки

Код

$("#image").resizable();

далее нужно, чтобы, при наведении на неё мыши, появлялась рамка

Код

#image:hover{border: 1px solid #AAAAAA};

Вот тут и возникает проблема - рамка отображается только сверху и слева, а снизу и справа её нет.
Вот скриншот:
user posted image

Первая картинка - это до наведения мыши, вторая - после.
Если делать не hover, а просто рамку, которая будет отображаться до наведение курсора, тогда рамка будет отображаться нормально.

Вот на всякий случай весь код

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.10.2/themes/base/jquery-ui.css" />
  <script src="jquery-1.9.1.min.js"></script>
 <script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<title>border</title>
<link rel="stylesheet" type="text/css" href="my.css">
<script type="text/javascript">
$(function() {
 $("#image").resizable();
})
</script>
<style>
#image:hover{border: 1px solid #AAAAAA};
</style>
</head>
<body>
<img src="images/2.png" id="image">  
</body>
</html>

Я тестирую код в firefox 19.0.2

Это сообщение отредактировал(а) railist - 3.4.2013, 16:21

baldina

Дата 3.4.2013, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 3433
Регистрация: 5.12.2007
Где: Москва

Репутация: нет
Всего: 101

Код


$("#image").resizable({
    create: function() {
        $(this).hover(function(){
            $(this).css("border","1px solid #AAAAAA")
        },
        function(){
            $(this).css("border","none")
        })
    }
})

Добавлено через 1 минуту и 36 секунд
дело в том, что UI создает div вокруг картинки.
в принципе вместо всего этого можно сделать

Код


.ui-wrapper:hover { border: 1px solid #AAAAAA; }

но влиять будет на все элементы

Добавлено через 8 минут и 1 секунду
либо

Код


$("#image").resizable()
$("#image").parent().attr("id","image-wrapper")

Код


#image-wrapper:hover{border: 1px solid #AAAAAA};

railist

Дата 3.4.2013, 20:34 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 12.10.2010

Репутация: нет
Всего: нет

Спасибо за ответ!

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »