Есть следующий код, при наведении на блок у svg должна меняться обводка, но если наводить на текст, который находится над самим svg элементом, то естественно обводка не появляется, пробовал делать вот так:
.accordion_name h2:hover svg {
stroke: orange;
}
Но это не привело ни к каким результатам, что можно сделать в данной ситуации?
И сразу еще вопрос, я разместил вот этот svg блок относительно родительского блока, мне нужно что бы текст всего был в районе данного треугольника:
Но если текст будет больше, то он выйдет за пределы:
Оно так и должно происходить с моим выполнением задачи, но есть ли способ сделать это правильно: Что бы если текст выходил за пределы треугольника, то треугольник делался больше в ширину, либо другие решения (Пробовал задавать максимальную ширину блоку с текстом, но не помогло).
* {
margin: 0;
padding: 0;
}
body {
backgoround-color: #ddddd;
}
.wrapper {
margin: 30px;
max-width: 600px;
}
.accordion_item {
margin-top: 4px;
}
.accordion_name {
padding: 10px;
cursor: pointer;
position: relative;
}
.accordion_name h2 {
position: relative;
z-index: 3;
display: inline-block;
}
.accordion_name h2:hover svg {
stroke: orange;
}
svg {
stroke: transparent;
position: absolute;
fill: #dddddd;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
transition: 0.2s;
}
svg:hover {
stroke: orange;
}
.accordion_content {
height: 0;
overflow: hidden;
}
One accordiont line
One accordiont line
One accordiont line
Ответ
Сделайте табы при помощи css:
* {
margin: 0;
padding: 0;
}
div {
border-bottom: 1px solid #ccc;
margin: 20%;
cursor: pointer;
}
span {
position: relative;
display: table;
border: 1px solid #ccc;
border-right: none;
background: #eee;
line-height: 28px;
margin-bottom: -1px;
padding: 0 30px;
}
span:before,
span:after {
content: '';
position: absolute;
top: -1px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 0 50px; /* Изменяя цифру 50 можно менять угол наклона */
border-color: transparent transparent transparent #ccc;
z-index: -1;
}
span:after {
margin-left: -2px;
border-color: transparent transparent transparent #eee;
}
div:hover {
border-bottom-color: orange;
}
div:hover span {
border-color: orange;
}
div:hover span:before {
border-color: transparent transparent transparent orange;
}
Не будет проблем с шириной. Ограничение для текста тоже можно приделать используя overflow: hidden и white-space: nowrap. Можете дорабатывать как захочется.
