Javascript-форум - javascript как добавить псевдо селектор

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - javascript как добавить псевдо селектор (https://javascript.ru/forum/dom-window/54216-javascript-kak-dobavit-psevdo-selektor.html)

javascript как добавить псевдо селектор

Нужен конкретный пример как добавить всевдо селектор к классу

ArsenInvoker,
пропишите в css дополнительный класс с

Цитата:

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

всевдо

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

рони,
вы не поняли например вот что у меня получилось

$(window).load(function () {
document.onkeydown =  function(invoke) {
if(82 === invoke.keyCode) {
alert( )
}
}
});

рони,
Как теперь сделать так чтобы при нажатии на букву R которую я обозначил добавлялся псевдо селектор к классу ??

ArsenInvoker,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  p.new:after {
      content: "Новьё!"; /* Добавляемый текст */
      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>

рони,
на пример псевдо селектор

:activ

рони,

я не про класс а про псевдо селектор к классу

рони,
а про твой пример я ниче не понял что ты хотел мне обьяснить ты добавляешь класс да ?

рони,
addClass("new");
ведь ты класс добавляешь а мне псевдо селектор :activ

ArsenInvoker,
смотрите пост 5 снова это всё чем могу помочь

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

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

Цитата:

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

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

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

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

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

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

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

$(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);
}

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

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

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

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>

рони,
Блин ну вы хорошо вы достигнули результата то что оно заукрасилось но ведь после отпускания клавиши она у вас не переходите в исходное состояние
о чем я говорил раньше событие мышки

Цитата:

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

ведь после отпускания клавиши она у вас не переходите в исходное состояние

так сделайте удаление по keyup

рони,
пожалуйста проясните мне ситуацию на это фронте впервые вижу
это
<style>selector:pseudo-classes{...}</style>

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

ArsenInvoker,
это к laimas,

Так если не изучать, то... А изучать надо и дохрена, на всю жизнь хватит. Если бы форум был кафедрой, тогда да, но на форумах вообще-то обсуждают конкретные действия, а у вас как в анекдоте про ежика - то у него рука чешется, то спинка...

Вы упорно не желаете писать анимацию используя jQuey, но при этом подцепляте его к на страницу, и где же логика?

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

- означает, например,

<style>a:hover{стили}</style>

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

laimas,
вы мне ша пример css (который подключается к странице на прямаю не через файл) показали который я знаю вы мне лучше скажите где найти информацию по селекторам в это ебаном спрачники ни хрена нормального нету я бы за место автора показывал бы очень много примеров начиная с одноклеточного уровня в разных моментах блин столько заморочек с этим языком php мне сто раз легче дался я просто вахуях

laimas,
довайте я обьясню чего я хочу и потом будем разбираться

Не надо мне объяснять, я не рони, у меня терпения не хватит :)

laimas,
а если по братски :(

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

Я не хочу.

laimas,
$(window).load(function () {
document.getElementById('quasactiv').style.display = 'none';
document.getElementById('wexactiv').style.display = 'none';
document.getElementById('exortactiv').style.displa y = 'none';
document.onkeydown = function(invoke) {
if(82 === invoke.keyCode) {
$("#invoke").mousedown();
$("#invoke").mouseup();

}
}
});
почему не работает эти свойства
$("#invoke").mousedown();
$("#invoke").mouseup();

$("#invoke").mousedown();
$("#invoke").mouseup();

А в чем тут работа заключается?

И вообще, зачем вам jQuery? Для того чтобы $(window).load(function () и события отлавливать, а все остальное "не замаранным ничем JS"?

laimas,
короче на до сделать так когда ты нажимаеш на клавишу R кликается div блок С нажатием я разобрался клавиша реагирует на действия например проверил alert а вот с кликом по блоку не как не пойму не получается от отчайния начал заниматься перебором

laimas,
короче надо чтоб клавиша R посылал звонок мышке мышка кликала по блоку div

laimas,
я застрял по посылу вызову к мышке не реагирует

А с чего бразуер должен чем то реагировать на это - $("#invoke").mousedown();? Изучать.

laimas,
с мышки конечно ! не :stop:

А это CSS, который вы никак нейти не можете.

laimas,
я же ведь не на Jquery это делал