Попытка выделить при касании с помощью псевдокласса :active в кордове
Я пытаюсь выделить различные варианты этого макета с помощью :active. Проблема в том, что выделение не заполняет весь контент. Вот изображение и мой код CSS и HTML. Надеюсь, вы, ребята, можете мне помочь.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Security-Policy" content = "default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">
<meta name = "format-detection" content = "telephone=no">
<meta name = "msapplication-tap-highlight" content = "no">
<meta name = "viewport" content = "user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel = "stylesheet" type = "text/css" href = "css/index.css">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
<h1 style = "padding-left: 30px; padding-top: 35px"><img src = "img/perro.png" style = "float:left;width:42px;height:42px; padding-right: 10px;">Bibliografía APA</h1>
</head>
<body>
<button onclick = "toggle_visibilityone()" style = "float: right">[+]
</button>
<a href = "html/libro.html" class = "hili" type = "button">
<div class = "tapp">
LIBRO
</div>
</a>
<p id = "p1">Un libro debe poseer 25 hojas mínimo (49 páginas), pues
de 24 hojas sería un folleto y de una hasta cuatro páginas se
consideran hojas sueltas (en una o dos hojas). Caen dentro de esta
categoría los e-books y los audiolibros</p>
<hr>
вот мой CSS
*{
-webkit-touch-callout: default;
-webkit-text-size-adjust: none;
-webkit-user-select: text;
-webkit-tap-highlight-color: transparent;
}
body {
width:100%;
height: 100%;
margin: 0%;
padding: 0%;
left: 0%;
top: 0%;
background-color: darkred;
font-size: 18px;
text-align: left;
}
div.tapp:active{
background-color: lightblue;
}
/*Parrafos con descripciones de cada tipo de fuente*/
p{
text-align: center;
background-color: white;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 13px;
display: none;
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein{
0% {opacity: 0;}
100% {opacity: 1;}
}
/*Enlaces del body*/
.hili{
color: white;
text-decoration: none;
}
/*Botones*/
button{
color: black;
margin-right: 10px;
font-size: 10px;
width: 30px;
height: 15px;
outline: none;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
/*Título de Bibliografía APA*/
h1{
position: relative;
background-color: rgb(127, 159, 219);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
color: white;
text-align: left;
font-size: 30px;
margin-top: 0px;
height: 70px;
border-bottom-style: solid;
border-color: black;
border-width: 2px;
}
А вот как это выглядит сейчас: Изображение
Наверное глупый вопрос, но я пытаюсь учиться и много читаю, но не могу решить. Заранее спасибо.
Ответы 1
Выделение не заполняет весь контент, потому что класс .tapp оборачивает только текст «LIBRO».
Я бы порекомендовал вам применить стиль :active непосредственно к правилу тега .hili в css или добавить дополнительный класс .tapp к тегу <a>.
Это устранило бы необходимость иметь <div class = "tapp"> вообще.
Итак, в вашем html приведенное ниже приведет к желаемому результату:
<a href = "html/libro.html" class = "hili tapp" type = "button">LIBRO</a>
Обновлено: (с ясностью из комментариев)
Поскольку вы пытаетесь сгруппировать больше элементов, тег <hr> не был включен, и на нем есть поле. Это поле ввело этот интервал между выделением :active и <hr>. См. следующий код.
https://codepen.io/anon/pen/oVBPdw
Я бы также рекомендовал вместо использования <hr> использовать border-bottom для содержащего div.
Я закинул код в codepen, чтобы покопаться в этом дальше. Поскольку вы хотите сгруппировать некоторые из этих элементов вместе, вам действительно следует обернуть все элементы, которые вы хотите сгруппировать, с помощью <div class = "tapp">codepen.io/anon/pen/oVBPdw.
Я, наконец, решил это, поле hr мешало выделению расширяться по всему пространству. Большое спасибо!
Теперь выделяется только слово "ЛИБРО". Ставлю
:activeв.hili