Как обойти текст при наведении на svg элемент?

#html #css #svg

Есть следующий код, при наведении на блок у 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
    
    

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias
inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi
omnis fugiat sed. Enim ipsum rerum iure quisquam.
    
  
  

    


      
One accordiont line
    
    

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias
inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi
omnis fugiat sed. Enim ipsum rerum iure quisquam.
    
  
  

    

      
      
One accordiont line
    
    

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente molestias
inventore cum. Eligendi ad quae, veritatis nostrum dolores doloremque culpa. Nam sequi
omnis fugiat sed. Enim ipsum rerum iure quisquam.
    
  




    

Ответы

Ответ 1

Сделайте табы при помощи 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;
}
Пунтк 1




Не будет проблем с шириной. Ограничение для текста тоже можно приделать используя
overflow: hidden и white-space: nowrap. Можете дорабатывать как захочется.


Ответ 2

Вот таким образом заголовок косой и тянется в зависимости от текста 



$(function() {
  $(".accordion").accordion({
    collapsible: true
  });
});
* {
  list-style: none;
  margin: 0;
  padding: 0;
  outline: none;
}

ul {
  width: 80%;
  margin: auto;
}

ul h2 {
  height: 40px;
  line-height: 40px;
  display: inline-block;
  background: pink;
  padding: 0 20px 0 10px;
  position: relative;
  border-bottom: 2px solid #fff;
  cursor: pointer;
  font-variant: small-caps;
  color: red;
}

ul h2:after {
  content: "";
  display: block;
  width: 80px;
  height: 40px;
  background: pink;
  position: absolute;
  top: 0;
  right: -70px;
  transform: skew(70deg);
}

ul h2:before {
  content: "";
  display: block;
  width: 60px;
  height: 20px;
  background: pink;
  position: absolute;
  right: -50px;
  top: 20px;
  transform: skew(40deg);
}

ul li div {
  width: 80%;
  padding: 10px 20px;
  background: #fbfbfb;
}




  

    
длинный текст
    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam necessitatibus,
exercitationem quos veritatis fugiat nostrum facilis minima eos consequatur nemo magnam
magni accusantium voluptate dolore excepturi placeat. Earum aspernatur ad vero suscipit
      velit blanditiis reprehenderit quas temporibus saepe magnam animi placeat libero
cum cupiditate accusantium dolorum voluptate modi rerum labore minima repudiandae,
amet esse numquam!
    
  
  

    
длинее прошлого но текста для проверки
    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, est. Perspiciatis
earum aut laborum deserunt fugit harum ab omnis, ad, qui repellat iste ex ratione ea
vel. Quod, quia ipsa?
    
  
  

    
ещё длинеее чем прошлый
    

      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum reiciendis
placeat distinctio officia error. Deserunt distinctio ab dolores, optio voluptate at
laboriosam tempora accusamus incidunt nulla aperiam minus enim suscipit recusandae.
Mollitia
      ducimus laboriosam temporibus maiores, tempora quasi natus, atque, error modi
neque cupiditate dicta! Perspiciatis voluptate natus exercitationem atque?
    
  
  

    
вообще длинный текст и он растягивает название
    

      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil tempora distinctio
labore libero est eos corporis quidem error repellendus quos veniam delectus voluptatem
ullam nam quia quas, porro excepturi ducimus tenetur corrupti impedit pariatur sunt.
      Corporis eum laudantium porro consectetur.
    
  



Ответ 3

Ещё вариант решения, как при наведении на svg элемент вывести большое количество
текста. Для этого используется встроенная в svg возможность вывода tooltip при наведении
на элемент.   

Для этого надо разместить текст в теги -  и обязательно обернуть
svg элемент, для которого нужен длинный текст в групповые теги 



.accordion_name:hover {
stroke:orange;
}