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 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 :-)
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?

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



Advertise | Privacy | Mobile
Web02 | 2.8.140926.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