javascript как добавить псевдо селектор
Нужен конкретный пример как добавить всевдо селектор к классу
|
ArsenInvoker,
пропишите в css дополнительный класс с Цитата:
|
рони,
вы не поняли например вот что у меня получилось $(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"); |
рони,
к примеру |
Цитата:
|
рони,
не бро не пашет то что я хочу сделать :( |
рони,
Мне надо было чтобы кнопка реагировала на блок(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> |
рони,
Блин ну вы хорошо вы достигнули результата то что оно заукрасилось но ведь после отпускания клавиши она у вас не переходите в исходное состояние о чем я говорил раньше событие мышки |
Цитата:
|
рони,
пожалуйста проясните мне ситуацию на это фронте впервые вижу это <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 это делал |
Часовой пояс GMT +3, время: 18:13. |