文本的实时预览使链接在悬停时不会改变背景颜色

时间:2015-03-04 22:41:21

标签: javascript jquery html css

我想要预览用户在输入框中输入的内容。文本显示在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>

1 个答案:

答案 0 :(得分:0)

您好,我在代码中没有看到您要更改背景颜色?但是,这里:

 <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') 

该链接仍然可以点击。