node.js - Implementation of script using javascript -


i'm want add effects when clik button using jquery.i wrote code on file named script1.js:(authentication/views/javascript/script1)

  $(document).ready(function() {     $( ".button" ).mouseenter(function() {       $(this).addclass("active");     });     $(".button").mouseleave(function() {       $(this).removeclass("active");     })   }); 

when call script in signin.ejs using :(authentication/views)

<script src="jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script> <script type="text/javascript" src="javascript/script1.js"></script> 

the button still fixed , no effect shown. style.css:(authentication/views/style)

.active {     background-color:#556677; }  .button {     background-color:#8cc6d7;     border:1px solid #5eb6dd;     border-radius: 5px;     width:100px;     height:40px;     margin-left:auto;     margin-right:auto;     font-family:arial;     font-size:15px; } 

then added folder named jquery (authentication/views/jquery/jquery-ui-1.11.4) on app.js(authentication/app.js(nodejs)),i added these lines:

app.use(express.static(__dirname +'/views/style')); app.use(express.static(__dirname +'/views/javascript')); app.use(express.static(__dirname +'/views/jquery/jquery-ui-1.11.4')); 

it working:

if button tag

$(document).ready(function() {     $("button").mouseenter(function() {       $(this).addclass("active");     })     $("button").mouseleave(function() {       $(this).removeclass("active");     })   });
.active {    background-color: #556677;  }  button {    background-color: #8cc6d7;    border: 1px solid #5eb6dd;    border-radius: 5px;    width: 100px;    height: 40px;    margin-left: auto;    margin-right: auto;    font-family: arial;    font-size: 15px;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button>click me</button>

else

if button class, keep active class after button in css jquery $(".button"):

 $(document).ready(function() {     $(".button").mouseenter(function() {       $(this).addclass("active");     })     $(".button").mouseleave(function() {       $(this).removeclass("active");     })   });
.button {      background-color: #8cc6d7;      border: 1px solid #5eb6dd;      border-radius: 5px;      width: 100px;      height: 40px;      margin-left: auto;      margin-right: auto;      font-family: arial;      font-size: 15px;    }    .active {      background-color: #556677;    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <input type="button" class="button" value="click me"></input>


Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -