Как убрать оформление текста с гармошки?

У меня есть аккордеон, но я хочу удалить текстовое оформление из: Hover из заголовков панелей, но он довольно вложен. (глубиной около шести слоев) Как сделать стиль для этого конкретного элемента? Я немного устарел с CSS для вложенных элементов ... ваше здоровье.

<div class = "row">
    <div class = "col-md-8 col-offset-2">

            <div class = "panel-group" id = "accordion" role = "tablist" aria-multiselectable = "true">
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingOne">
                        <h4 class = "panel-title">
                          <a role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
                            Website
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseOne" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingOne">
                        <div class = "panel-body">
                          Website Details.
                        </div>
                      </div>
                    </div>
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingTwo">
                        <h4 class = "panel-title">
                          <a class = "collapsed" role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo">
                            Author
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseTwo" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingTwo">
                        <div class = "panel-body">
                          Author Details. 
                        </div>
                      </div>
                    </div>
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingThree">
                        <h4 class = "panel-title">
                          <a class = "collapsed" role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree" aria-expanded = "false" aria-controls = "collapseThree">
                            Credits
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseThree" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingThree">
                        <div class = "panel-body">
                          Thanks to... 
                        </div>
                      </div>
                    </div>
                  </div>

    </div>
</div>

вы хотите убрать наведение на такие теги <a>, как «Веб-сайт», «Автор» и «Авторы»?

— 04.01.2019 10:50

jquery css accordion

04.01.2019 10:45

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

615

Ответы 2

вы можете использовать следующий код для удаления text-decoration на hover из a в заголовках:

h4 a:hover{
   text-decoration:none;
}

Хотя, в зависимости от вашего кода CSS, вам может потребоваться более конкретный селектор. В этом случае нам понадобится ваш код css.

04.01.2019 10:51

.panel-title a:hover {
    text-decoration: none;
}

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class = "row">
    <div class = "col-md-8 col-offset-2">

            <div class = "panel-group" id = "accordion" role = "tablist" aria-multiselectable = "true">
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingOne">
                        <h4 class = "panel-title">
                          <a role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne" aria-expanded = "true" aria-controls = "collapseOne">
                            Website
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseOne" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingOne">
                        <div class = "panel-body">
                          Website Details.
                        </div>
                      </div>
                    </div>
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingTwo">
                        <h4 class = "panel-title">
                          <a class = "collapsed" role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo" aria-expanded = "false" aria-controls = "collapseTwo">
                            Author
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseTwo" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingTwo">
                        <div class = "panel-body">
                          Author Details. 
                        </div>
                      </div>
                    </div>
                    <div class = "panel panel-default">
                      <div class = "panel-heading" role = "tab" id = "headingThree">
                        <h4 class = "panel-title">
                          <a class = "collapsed" role = "button" data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree" aria-expanded = "false" aria-controls = "collapseThree">
                            Credits
                          </a>
                        </h4>
                      </div>
                      <div id = "collapseThree" class = "panel-collapse collapse" role = "tabpanel" aria-labelledby = "headingThree">
                        <div class = "panel-body">
                          Thanks to... 
                        </div>
                      </div>
                    </div>
                  </div>

    </div>
</div>

Найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь, чтобы обучать людей, а не просто сбрасывать им код.

— 04.01.2019 11:02

04.01.2019 10:53