Сделал такой код - при наведении мышкой - выделяется текущий div красной рамкой (чистый CSS), а как выделять текущий элемент при нажатии кнопок вниз и вверх на клавиатуре ? Причем если дошел до самого верхнего, то красная рамка бы не исчезала ? Двигается только красная рамка вокруг DIV.
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div div:hover{border:3px solid #DC143C}
div div{border:3px solid white; margin: 10px 0 10px 0}
html {overflow-y: hidden}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
document.onkeydown = function checkKeycode(event)
{
var keycode;
if(!event) var event = window.event;
if (event.keyCode) keycode = event.keyCode; // IE
else if(event.which) keycode = event.which; // all browsers
switch(keycode) {
//* кнопка вниз:
case 40:
alert("down");
break;
// кнопка вверх:
case 38:
alert("up");
break;
}
}
</script>
</head>
<body>
<div style="float: left; width: 90vw">
<div>1<br><br><br><br><br><br><br></div>
<div>2<br><br><br><br><br><br><br></div>
<div>3<br><br><br><br><br><br><br></div>
<div>4<br><br><br><br><br><br><br></div>
<div>5<br><br><br><br><br><br><br></div>
<div>6<br><br><br><br><br><br><br></div>
<div>7<br><br><br><br><br><br><br></div>
<div>8<br><br><br><br><br><br><br></div>
<div>9<br><br><br><br><br><br><br></div>
<div>10<br><br><br><br><br><br><br></div>
</div>
</body>
</html>
|
|