Форум

ArsenInvoker · #11 (**permalink**) 09.03.2015, 14:16

рони,
ок вы хотите сказать что это будет работать
$(".test").addClass("new:activ");

ArsenInvoker · #12 (**permalink**) 09.03.2015, 14:16

рони,
к примеру

рони · #13 (**permalink**) 09.03.2015, 14:19

Сообщение от ArsenInvoker

вы хотите сказать что это будет работать

я хочу сказать что не знаю ответа на ваш вопрос

ArsenInvoker · #14 (**permalink**) 09.03.2015, 14:56

рони,
не бро не пашет то что я хочу сделать

ArsenInvoker · #15 (**permalink**) 09.03.2015, 15:03

рони,
Мне надо было чтобы кнопка реагировала на блок(div) у меня получилось идем дальше когда я клацаю мышкой по кнопе она изменяется потому что я так прописал в css за это отвечает псевдо селектор :active И ТЕПЕРЬ ГЛАВНЫЙ ВОПРОС КАК ЭТО РЕАЛИЗОВАТЬ НАЖАТИЯ МЫШКИ НА ЭТУ КНОПКУ ЧТОБ ПРИМЕНЯЛСЯ ЭФЕКТ :active
без участия мыши в java script

рони · #16 (**permalink**) 09.03.2015, 15:12

ArsenInvoker,
чем вас присвоение дополнительного класса то неустраивает?

ArsenInvoker · #17 (**permalink**) 09.03.2015, 15:44

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

ArsenInvoker · #18 (**permalink**) 09.03.2015, 15:53

$(window).load(function () {
document.getElementById('quasactiv').style.display = 'none';
document.getElementById('wexactiv').style.display = 'none';
document.getElementById('exortactiv').style.display = 'none';
document.onkeydown =  function(invoke) {
if(82 === invoke.keyCode) {
//вот напишите так как вы говорите будет праильно
}
}
});

<!doctype html>

<html lang="ru">
<head>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> 
<script type="text/javascript" src="js/cast.js"></script>
<script type="text/javascript" src="js/shporgalka.js"></script>
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    
<div class="invoker">
</div>
        <div class="qwe">
                 <div id="quasactiv">
        <a href="#"></a>
    </div>
    <div id="wexactiv">
        <a href="#"></a>
    </div>
        <div id="exortactiv">
        <a href="#"></a>
    </div>
    </div>
    <div class="content">
       
            <p><a href="#" class="shtorka">подсказка</a></p>
        
    </div>
    <div class="platforma">

    </div>
    <div class="shpargalka">
    </div>
    <div class="cast">
        <div id="quas" onclick="clickQuas()">
            <input id="btn-quas" type="submit" value="Q">
        </div>
 
        <div id="wex" onclick="clickWex()">
            <input id="btn-wex" type="submit" value="W">
        </div>

        <div id="exort" onclick="clickExort()">
            <input id="btn-exort" type="submit" value="E">
        </div>

        <div id="invoke">
            <input id="btn-invoke" type="submit" value="R">
        </div>

    </div> 
    <div class="platforma2">
    </div> 
</html>

* {
    margin:0;
    padding:0;
 }
 .invoker {
margin-top: 20px;
}

 
 .qwe {
width: 280px;
position: relative;
text-align: center;
margin: 0 auto;
 }
.qwe div {
display: inline-block;
margin: 20px 10px 0px 10px;
border-radius: 100%;
border: 5px solid #000;
}
 
 .cast {

   width: 100%;
   position: relative;
   text-align: center;
   
 }
 .cast div{
    display: inline-block;
   margin: 0 10px 0 10px;
 }
 .cast a {
    text-decoration: none;    
 }
 #quas {
 border-radius:5px;
 background-image: url(img/quas.png);
 width: 128px;
 height:128px;
 border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 
 }
 #wex {
 border-radius:5px;    
 background-image: url(img/wex.png);
 width: 128px;
 height:128px;
 border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
 #exort{
 border-radius:5px;   
 background-image: url(img/exort.png);
 width: 128px;
 height:128px;
 border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
  #invoke{
 border-radius:5px;    
 background-image: url(img/invoke.png);
 width: 128px;
 height:128px;
 border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 
 }
  .content {
    border-radius:5px;
    background: url(img/invoker.jpg) no-repeat 50% 95%;
    height: 270px;
    margin: 30px auto;
    border: 5px solid #232523;
    width: 230px;

-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
 
  #quas:active {
    width: 125px;
    height: 125px;
	
 }
 #wex:active {
    width: 125px;
    height: 125px;
 }
 #exort:active {
    width: 125px;
    height: 125px;
 }

 #invoke:active {
    width: 125px;
    height: 125px;
 }
 #wexactiv {
background:url(img/wexactiv.png)no-repeat;
height: 60px;
width:60px;
margin:0 auto;
 border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
 #quasactiv {
background: url(img/quasactiv.png)no-repeat;
height: 60px;
width:60px;
 border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
 #exortactiv {
background:url(img/exortactiv.png)no-repeat;
height: 60px;
width:60px;
 border:2px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
 }
.content p {
text-decoration: none;
color: #000;
transform: rotate(-45deg);
  }
.content p:hover {
color:#fff;    
}


.content a {
text-decoration: none;
color: #000;
  }
.content a:hover {
color:#fff;    
}

.shpargalka {
position: relative;
display: none;
background: url(img/shporgalka.png) no-repeat;
height: 660px;
width: 470px;
margin: 0px auto;
bottom: 20px;

}

a.shtorka{
position: absolute;
text-decoration: none;
color: #000;
display: block;
font-family: cursive;
left: -15px;
bottom: 0px;
top: -3px;
}

a.shtorka:hover{
position:absolute;
text-decoration: none;
color: #fff;
display: block;
font-family: cursive;
}
input[type="submit"] {
font-size: 30px;
color: #FFF;
background: #4F4F4F;
border: 2px solid #262726;
padding: 0 5px 0 5px;
float: left;
}


.platforma {
border-top: 10px solid #232523;
position: relative;
margin: 0 auto;
width: 1000px;
bottom: 35px;
border-radius:50px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow:    0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow:         0px 0px 30px 10px rgba(50, 50, 50, 1);
}

.platforma2 {
border-top: 10px solid #232523;
position: relative;
margin: 0 auto;
width: 100%;
border-radius: 50px;
top: 20px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}

laimas · #19 (**permalink**) 09.03.2015, 15:55

Псевдоселекторы не являются DOM-объектами, вы изучать материал начнете или нет?

Хотите управления через псевдоселкторы назначая или изменяя их, значит добавляйте в документ

<style>selector:pseudo-classes{...}</style>

рони · #20 (**permalink**) 09.03.2015, 15:55

ArsenInvoker,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  p:active, p.new {

      color: #333; /* Цвет текста */
      background-color: #fc0; /* Цвет фона */
      font-size: 90%; /* Размер шрифта */
      padding: 2px; /* Поля вокруг текста */
    }

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(window).load(function(){
         $(document).keydown(function(event) {
         if(82 === event.keyCode) {
     $(".test").addClass('new');
}
})


});


  </script>
</head>

<body>   <h2>Истории</h2>
  <p class="test">История о том, как необходимо было сделать могилу,
     ее начали копать, а потом закапывать, и что из этого получилось.</p>
  <p>История о том, как возле столовой появились загадочные розовые
     следы с шестью пальцами, и почему это случилось.</p>



</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript