How do i remove this highlight script in jQuery/Javascript
I found this stream script online. It uses jQuery and PHP to load more more comments when you click a div. But thats not what i need to know. It came preloaded with this feature where when your mouse is over the body of the comment (post_container) it gets highlighted. I cant read JS/ jQuery.. So can someone tell me where is is so i can remove it? It would really help :)
Heres the source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>stream</title>
<style type="text/css">
#posts-container { width:400px; border:1px solid #ccc; color: #62D7D7; }
.post { padding:5px 10px 5px 100px; min-height:65px; border-bottom:1px solid #ccc; background:url(dwloadmore.) 5px 5px no-repeat; cursor:pointer; }
.post:hover { background-color:lightblue; }
a.post-title { font-weight:bold; font-size:12px; text-decoration:none; }
a.post-title:hover { text-decoration:underline; color:#900; }
a.post-more { color:#900; }
p.item-content { font-size:10px; line-height:17px; paddin color: #62D7D7;g-bottom:0; }
#load-more {
background-color:#eee;
color:#999;
font-weight:bold;
text-align:center;
padding:10px 0;
cursor:pointer;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
#load-more:hover { color:#666; }
.activate { background:url(loadmorespinner.gif) 140px 9px no-repeat #eee; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2.js"></script>
<script type="text/javascript">
//when the DOM is ready
$(document).ready(function(){
//settings on top
var domain = 'http://davidwalsh.name/';
var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
//function that creates posts
var postHandler = function(postsJSON) {
$.each(postsJSON,function(i,post) {
//post url
var postURL = '' + domain + post.name;
var id = 'post-' + post.ID;
//create the HTML
$('<div></div>')
.addClass('post')
.attr('id',id)
//generate the HTML
.html('<a href="' + postURL + '" class="post-title">' + post.username + '</a><p class="item-content">' + post.item_content + '<br /><a href="' + postURL + '" class="post-more">Read more...</a></p>')
.click(function() {
window.location = postURL;
})
//inject into the container
.appendTo($('#posts'))
.hide()
.slideDown(250,function() {
开发者_运维知识库 if(i == 0) {
$.scrollTo($('div#' + id));
}
});
});
};
//place the initial posts in the page
postHandler(initialPosts);
//first, take care of the "load more"
//when someone clicks on the "load more" DIV
var start = <?php echo $_SESSION['posts_start']; ?>;
var desiredPosts = <?php echo $number_of_posts; ?>;
var loadMore = $('#load-more');
//load event / ajax
loadMore.click(function(){
//add the activate class and change the message
loadMore.addClass('activate').text('Loading...');
//begin the ajax attempt
$.ajax({
url: 'jquery-version.php',
data: {
'start': start,
'desiredPosts': desiredPosts
},
type: 'get',
dataType: 'json',
cache: false,
success: function(responseJSON) {
//reset the message
loadMore.text('Load More');
//increment the current status
start += desiredPosts;
//add in the new posts
postHandler(responseJSON);
},
//failure class
error: function() {
//reset the message
loadMore.text('Oops! Try Again.');
},
//complete event
complete: function() {
//remove the spinner
loadMore.removeClass('activate');
}
});
});
});
</script>
Remove the CSS line:
.post:hover { background-color:lightblue; }
EDIT: You probably want to remove this too:
a.post-title:hover { text-decoration:underline; color:#900; }
It is occurring in the following area:
.post:hover { background-color:lightblue; }
you can remove the hover color by either:
- Removing the
.post:hoverline entirely. - Removing
background-colorproperty inside of.post:hover: (background-color:lightblue;)
Here is a link if you want to learn a bit more about CSS:
Intro to CSS - W3Schools
加载中,请稍侯......
精彩评论