Как я могу изменить стиль Div на Mousedown? Или любое другое событие в этом отношении ... - PullRequest
Новая
       5

Как я могу изменить стиль Div на Mousedown? Или любое другое событие в этом отношении ...

3 голосов
/ 26 июня 2009

Но это не работает. Вы можете видеть, что я пытаюсь изменить класс элемента div, содержащего season.png onmousedown, и вернуть его обратно на mmouseup.

Что мне не хватает?

Спасибо. Mike

Ответы [ 6 ]

2 голосов
/ 26 июня 2009

Работает просто отлично. В написанном вами коде нет ничего плохого, поэтому, если вы не видите его, значит, что-то не так с вашим CSS.

Я использовал это, чтобы проверить код: 

<html>
<head>
<title>Test</title>
<style>

.winter { border: 1px solid blue; }
.spring { background: yellow; }
.summer { background: green; }

</style>
</head>
<body>

<div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
<img src="Resources/season.png" />
</div>

</body>
</html>
0 голосов
/ 12 июля 2009

Файл Javascript, который я использовал, был очень негибкой библиотекой. Я решил проблему по-другому.

0 голосов
/ 26 июня 2009

В качестве альтернативы - для этого я использовал псевдоселектор наведения.

Вот личный пример: 

.sidebar ul.sidebuttons li a
        {
         font: bold italic x-large/1.1 trebuchet ms,verdana,sans-serif;
         display: block;  /* effect should be in a new box not inline */
         text-decoration: none; /* turn off link underlining */
         color: yellow;
         background: black url(sidebar_off.png) no-repeat center;
         padding: 10px 10px 10px 5px;
         margin: 0px 0px 20px 0px;
         border: white outset;
         border-width: 2px 2px 2px 0px;
         text-align: right;
         text-transform: lowercase;
        }

.sidebar ul.sidebuttons li a:hover
        {
         background: yellow url(sidebar_on.png) no-repeat center;
         color: black;
         border: black inset;
         text-decoration: none;
         border-width: 2px 2px 2px 0px;
        }

HTML выглядит так: 

<div class="sidebar">
  <ul class="sidebuttons">
    <li><a href="somelink.html" title="A linke">Go Somewhere</a></li>

Если у вас возникли проблемы, попробуйте дополнение для Firefox Web Developer или что-то подобное, чтобы проверить информацию о стиле в этой части страницы. Это может не вызывать то, что, как вы думаете, должно сработать.

0 голосов
/ 26 июня 2009 
<style>
.summer{ background-color:red;}
.spring{ background-color:blue;}
.aa{ font-size:18px;}
.bb{ font-size:36px;}
</style>
<div class="aa spring" onmousedown="this.className='summer aa'" onmouseup="this.className='spring bb'">
aaaaaaaaa
</div>

Я тестирую этот код, он работает хорошо. Я думаю, не проблема JavaScript. Попробуйте проверить CSS или другие вещи.

Возможно, поместите js-код и css-код на img - это то, что вам нужно.

0 голосов
/ 26 июня 2009

Это работает для меня, поэтому я думаю, вам нужно выполнить некоторые проверки вашего кода. Убедитесь, что ваш CSS включен.

Разместите полный код, который вы используете, чтобы мы могли искать ошибки.

Это код, который я использовал: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>onmouseevents on div</title>
        <style type="text/css">
body
{
    background-color: #FFF;
    color: #000;
}
.page
{
    margin: 10px auto;
    width: 640px;
}

.winter
{
    background-color: cyan;
}
.spring
{
    color: magenta;
}
.summer
{
    color: yellow;
}
        </style>
    </head>
    <body>
        <div class="page">
            <div class="winter spring" onmousedown="this.className='winter summer'" onmouseup="this.className='winter spring'">
                Cats!
            </div>
        </div>
    </body>
</html>
0 голосов
/ 26 июня 2009

Это очень просто с jQuery : 

$(".winter").mouseup(function() {
    $(this).addClass("spring");
    $(this).removeClass("summer");
},function(){
    $(this).addClass("summer");
    $(this).removeClass("spring");
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...