Click here to Skip to main content
Sign Up to vote bad
good
See more: CSSjQuery
Hi, new at jQuery and CSS, have problem with apply style. The code below work only for first div, I cant make show and hide each of div.
 
<div id="post">
		Some text here
		<span style="float:left"><a href="#">коментувати</a></span>
		<span id="settings"><a href="#">редагувати</a> | <a href="#">видалити</a></span>
		<br /><br />
		<hr>
	</div>
	
	<div id="post" style="">
		Some text here
		<span style="float:left"><a href="#">коментувати</a></span>
		<span id="settings"><a href="#">редагувати</a> | <a href="#">видалити</a></span>
		<br /><br />
		<hr>
	</div>
 
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<style>
		#settings {
			float:right; 
			display: none;
		}
	</style>
	<script type="text/javascript">
		$('#post').mouseover(function() {
			
			$('#settings').show();
		}).mouseout(function() {
			$('#settings').css('display', 'none');
		});
	</script>
Posted 6 Nov '12 - 11:23
Lubomur270


2 solutions

try this.. you have to change some attributes values. Two element of an html page cant have same id.

<style type="text/css">
		#settings {
			float:right; 
			display: none;
		}
	</style>
<script type="text/javascript">
	    $(function () {
	        $('.post').mouseover(function () {//mouseover method for post class div
	            $('.post span').show(); 
                    //select span of post class div
	        }).mouseout(function () {
	            $('.post span').css('display', 'none');
                    //select span of post class div
	        });
        
        });
        
	</script>
 

<div class="post">
		Some text here
		<span style="float:left"><a href="#">коментувати</a></span>
		<span><a href="#">редагувати</a> | <a href="#">видалити</a></span>
		<br /><br />
		<hr>
	</hr></div>
	
	<div class="post" style="">
		Some text here
		<span style="float:left"><a href="#">коментувати</a></span>
		<span><a href="#">редагувати</a> | <a href="#">видалити</a></span>
		<br /><br />
		<hr>
	</hr></div>
  Permalink  
Comments
Lubomur - 7 Nov '12 - 4:18
Ye it's work as previous, but when mouseover the '.post' all post shows, I just want to make show only one post.
deepak.m.shrma - 7 Nov '12 - 6:30
its is to do ... instead of $('.post span') write $(this).find('span') eg. $(this).find('span').show();
Lubomur - 7 Nov '12 - 10:11
Thank you very much! It's work.
deepak.m.shrma - 7 Nov '12 - 21:53
Welcome :-)
Try:
		$('div').mouseover(function() {
			
			$('span').show();
		}).mouseout(function() {
			$('span').css('display', 'none');
		});
This will attach the property with every div and span. If you want to do anything specific for div/span, you can add selectors to it.
BTW, please don't keep same ID's for every div & span. Not needed.
 
Details here: http://api.jquery.com/category/selectors/[^]
http://www.w3schools.com/jquery/jquery_ref_selectors.asp[^]
  Permalink  
Comments
Neelam Chandra (8015059) - 7 Nov '12 - 0:29
how can we show <span>'s option on current div only on which we mouse over, as its showing option of all div when we mouse over any of these div?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Mohammed Hameed 268
1 OriginalGriff 236
2 Sergey Alexandrovich Kryukov 153
3 Mayur_Panchal 153
4 CPallini 100
0 Sergey Alexandrovich Kryukov 8,171
1 OriginalGriff 6,246
2 CPallini 3,532
3 Rohan Leuva 2,703
4 Maciej Los 2,234


Advertise | Privacy | Mobile
Web03 | 2.6.130516.1 | Last Updated 6 Nov 2012
Copyright © CodeProject, 1999-2013
All Rights Reserved. Terms of Use
Layout: fixed | fluid