Решил сделать интересное меню на чистом css. Внешне выглядит хорошо, но вот из-за transform
съехали "хит поинты" элементов. Так что теперь при наведении в пустую область, срабатывает hover на элемент.
Можно ли переписать стили, чтобы наведение срабатывало только на элементе, а не на том месте, где он должен находится если убрать transfrom
?
Скорее всего не очень понятно, так что все в примере
body {
margin-top:100px;
}
ul {
list-style-type: none;
}
.menu {
width: 300px;
display: flex;
justify-content: center;
}
.menu .-list {
width: 100%;
}
.menu .-item {
color: #151515;
}
.card {
display: flex;
margin-bottom: 4px;
}
.card .-block {
background-color: #eaeaea;
position: relative;
text-transform: uppercase;
border-bottom: 4px solid #2446cb;
}
.card .-block._left {
width: 5%;
transform: rotateZ(30deg) skewX(30deg);
transform-origin: 100% 0 0;
border-right: 1px solid #2446cb;
}
.card .-block._right {
min-width: 60%;
transform: rotateZ(-30deg) skewX(-30deg);
transform-origin: 0 0 0;
}
.card:hover .-block {
background-color: red;
}
<nav class="menu">
<ul class="-list">
<li class="-item">
<div class="card">
<div class="-block _left">1</div>
<div class="-block _right">Здесь</div>
</div>
</li>
<li class="-item">
<div class="card">
<div class="-block _left">2</div>
<div class="-block _right">Скоро</div>
</div>
</li>
<li class="-item">
<div class="card">
<div class="-block _left">3</div>
<div class="-block _right">Будет </div>
</div>
</li>
<li class="-item">
<div class="card">
<div class="-block _left">4</div>
<div class="-block _right">Меню</div>
</div>
</li>
</ul>
</nav>
card
, а уcard
никакого transform нет, вот и причина. Правда, как по-умному исправить, пока не придумалось.card
, то что он не трансформируется, а вот-block
меняется. Попробую решить через js, отслеживая наведение на-block