文本的實時預覽使鏈接懸停在鏈接上時不會更改背景顏色

Question

我想實時預覽用戶在輸入框中鍵入的內容。 文本顯示在div上。

我的代碼：

var input = $('#titleText'),
            preview = $('.title');

            input.keyup(function (e){
              preview.html(input.val());
              preview.css('padding-top', '10px');
              preview.css('padding-bottom', '10px');
              preview.css('padding-right', '15px');
              preview.css('padding-left', '15px');
              preview.css('word-wrap', 'break-word');
          });

問題是我在href中有該div，現在該鏈接不起作用（將鼠標懸停時它不會更改其背景顏色）。 我怎樣才能解決這個問題？

我的div：

<ul class = "nav nav-list nav-stacked col-md-4 col-lg-4" id = "courseNav">
            <li class = "title" class = "active"><a href="#">Title</a></li>
            <hr style = "margin-top: -0.8px">                
            <li class = "topics" style = "margin-top: -12px"><a href="#">Topic</a></li>
            <li class = "topics"><a href="#">Topic</a></li>
            <li class = "topics"><a href="#">Topic</a></li>
        </ul>

Answer 1

嗨，我在代碼中看不到您要更改背景顏色的位置嗎？ 但是，這里：

 <li class = "title" class = "active"><a href="#">Title</a></li>

您應該更改為：

 <li class = "title active"><a href="#">Title</a></li>

因為標簽上不能有2 class =-您必須組合這些類。

還...如果您更改：

 preview = $('.title') 

至：

 preview = $('.title a') 

該鏈接仍將是可單擊的。