Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS jQuery
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:23am
Lubomur313
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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) at 7-Nov-12 0:29am
   
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?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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>
		
 

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

		<hr>
	</hr></div>
  Permalink  
Comments
Lubomur at 7-Nov-12 4:18am
   
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 at 7-Nov-12 6:30am
   
its is to do ...
instead of $('.post span') write
$(this).find('span')
 
eg.
$(this).find('span').show();
Lubomur at 7-Nov-12 10:11am
   
Thank you very much! It's work.
deepak.m.shrma at 7-Nov-12 21:53pm
   
Welcome :-)

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

  Print Answers RSS
0 OriginalGriff 210
1 Richard MacCutchan 100
2 kbrandwijk 90
3 ProgramFOX 80
4 Mukesh Bhagat 65
0 Sergey Alexandrovich Kryukov 9,050
1 OriginalGriff 8,151
2 CPallini 2,613
3 Richard MacCutchan 2,221
4 Abhinav S 1,928


Advertise | Privacy | Mobile
Web02 | 2.8.140827.1 | Last Updated 6 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100