All geek questions in one place

How can I change the Div style to Mousedown ?, or any other event for that matter ...

But that will not work. You can see that I am trying to change the div class containing season.png onmousedown and return it onmouseup.

What am I missing?

Thanks. Mike

+3
source share
6 answers

The Javascript file I used was a very inflexible library. I solved the problem differently.

-2
source

It works great. There is nothing wrong with the code you posted, so if you don't see it, there should be something wrong in your css.

I used this to check the code:

<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>
+2
source

, , , . , 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
<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

- .

:

.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

jQuery:

$(".winter").mouseup(function() {
    $(this).addClass("spring");
    $(this).removeClass("summer");
},function(){
    $(this).addClass("summer");
    $(this).removeClass("spring");
});
-1

Source: https://habr.com/ru/post/1711324/

More articles:


All Articles