I want to have a live preview of what the user types into a input box. The text is displayed on a div.
My code:
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');
});
The problem is that I have that div in an a href and now the link does not work(it does not change its background-color when hovered over). How can I fix this?
My 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>
Hi I don't see in the code where you are changing the background color? However, here:
<li class = "title" class = "active"><a href="#">Title</a></li>
you should change to:
<li class = "title active"><a href="#">Title</a></li>
because you can't have 2 class= on the tag - you have to combine the classes.
also... if you change:
preview = $('.title')
to:
preview = $('.title a')
the link will still be clickable.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.