We're a community of 1.1M IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,080,571 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

css - selecting images with links hover

Hello,

There is such code in css file

a:hover {
	background: #F1F9DA; 
	color: #895F30;
	border-bottom: 1px dotted #895F30;
}

so on mouse over it changes the backgroutd of links and adds border.

But I have images wiht links

<img class="reklama" src="http://localhost/darzelis/uploads/reklama/ad_-_Copy.jpg" alt="#" border="0">

and I don't want a backgroud and border when mouse is over link image with link, but where are links with without images I want it be how it is now.

How can I easily achieve this?

I know I could create a class and use it where I have images with links but then I have add it everywhere in my html code.

3
Contributors
13
Replies
3 Days
Discussion Span
2 Years Ago
Last Updated
14
Views
SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

Damn, I guess I'll have to create another class and add it everywhere, it looks that there is no other way :(

http://cssbeauty.com/skillshare/discussion/565/the-ahover-img-problem/

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

How about try 'a img:hover{ border:0;}'

shaya4207
Junior Poster
147 posts since Apr 2010
Reputation Points: 18
Solved Threads: 25
Skill Endorsements: 0

How about try 'a img:hover{ border:0;}'

that didn't help.

But I modified a:hover by adding .nice

a.nice:hover {				
	background: #F1F9DA; 
	color: #895F30;
	border-bottom: 1px dotted #895F30;
}

And of course I had to add this class to all non image links.

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

Actually if I'm not mistaken 'img{border: 0;}' should work just fine

shaya4207
Junior Poster
147 posts since Apr 2010
Reputation Points: 18
Solved Threads: 25
Skill Endorsements: 0

Shouldnt it be:

a.hover {background-image: url(your_file_path.jpg);
         border:none;
        }

If I'm understanding what you want completely.

teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
Skill Endorsements: 0

Actually if I'm not mistaken 'img{border: 0;}' should work just fine

I tried and it didn't. You see, the border is not on the image, it is on the link. (Of course it looks that it is on image in browser). And there you try remove it from img as I understand.

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

Shouldnt it be:

a.hover {background-image: url(your_file_path.jpg);
         border:none;
        }

If I'm understanding what you want completely.

This is not good for me because images are not constant. The user can change them.

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

Well how are you passing the images to your html then? Wouldnt the user defined images need to be stored in a variable, then use the variable to display the images?

Maybe you should post a link to your page so we can see exactly what your talking about.

teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
Skill Endorsements: 0

Yeah, please post either the code or the link

shaya4207
Junior Poster
147 posts since Apr 2010
Reputation Points: 18
Solved Threads: 25
Skill Endorsements: 0

I am doing it on localhost, so I cannot give a link, but I can show some code. Here I simply generate those links, and

$this->display('admin/workers_view');

shows the page.

function index()
  {
 	if($this->membership->is_logged_in())
    {
    	$this->data_header['title'] = 'Administravimas - darbuotojai';
    	$this->data_header['javascript'] = '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
											<script  src="'.base_url().'js/jqueryAlerts/jquery.alerts.js" type="text/javascript"></script>
											<script  src="'.base_url().'js/jquery.validate.js" type="text/javascript"></script>
											<script  src="'.base_url().'js/jquery.form.js" type="text/javascript"></script>
											<script type="text/javascript" src="'.base_url().'js/valums-ajax-upload/ajaxupload.js"></script>
										    <script src="'.base_url().'js/mano/staff.js" type="text/javascript"></script>
    										<script src="'.base_url().'js/tiny_mce/tiny_mce.js"></script>';
    	
    	$this->data_sidebar['no_sidebar'] = TRUE;
    	$this->data_main['content'] = $this->generate_main();
    	$this->data_main['categories'] = $this->get_categories();
    	
    	$this->display('admin/workers_view');
    }
	else
	{
		redirect('admin/login');
	}
  
  }
  
  function generate_main()
  {
  	$this->load->library('table');
  	$this->load->helper('form');
  	
  	$query = $this->db->get('staff');
  	$results = $query->result_array();
  	$this->table->set_heading('Vardas', 'Pavardė', 'Pareigos','Apibūdinimas','Kategorija','Redagavimas','Trynimas');
  	
	//gaunam kategorijas, lentelej reiks rodyt ne ju id, o pavadinimus, pasidarom masyva, kurio indexsai - id, o reiksmes - pavadinimai
	$query2 = $this->db->get('staff_categories');
	$categories = array();
	foreach($query2->result() as $res)
	{
		$categories[$res->cat_id] = $res->name;
	}
  	
  	
  	$count = $this->db->count_all_results('staff');
  	if($count != 0)
  	{
	  	for($i = 0; $i<$count; $i++)
	  	{
	  		$results[$i]['description'] = '<a class = "read nice" id = "read_'.$results[$i]['id'].'" href= "">Skaityti</a>';
	  		
	  		$results[$i]['redagavimas'] =  '<a href= "#" class = "edit" id = "edit_'.$results[$i]['id'].'"><img src="'.base_url().'images/admin/application_form_edit.png" /></a>';
	  		$results[$i]['trynimas'] = '<a class = "trinti" id = "trinti_'.$results[$i]['id'].'" href='.base_url().'admin_/darbuotojai/trinti/'.$results[$i]['id'].'><img src="'.base_url().'images/admin/delete.png" /></a>';	
	  		
			
			if(isset($categories[$results[$i]['category']]))
			{
	  			$results[$i]['category'] = $categories[$results[$i]['category']];
			}
	  		else 
	  		{
	  			$results[$i]['category'] = 'Nepasirinkta';
	  		}
	  		
	  		unset($results[$i]['id']);
	  		unset($results[$i]['filename']);
	  		
	  	};
	  	$return = $this->table->generate($results);
  	}
  	else $return = br().'Darbuotojų nėra';
  
  	return $return; 
  	
  }

view file:

<style type="text/css">

ul { list-style: none; 
list-style-type: none;}




div.button {

    margin-left: 0px;
    background: url(<?php echo base_url()?>images/admin/reklama_edit/rek.gif) 0 0;
    height: 21px;	
	width: 119px;
	font-size: 14px; color: #E2DEDE;
	text-align: center;
	padding-top: 5px;

}

div.button.hover {
			background: url(<?php echo base_url()?>images/admin/reklama_edit/rek.gif) 0 0px;
			color: #95A226;	
		}

</style>

<div id="main">
	<?php 
	echo br();
	$attr = array(
		'class' => "nice"
	);
	echo anchor('admin', 'Pagrindinis administravimo meniu',$attr).br();
	
	echo br(2).'<a class = "add nice" href="#">Pridėti naują darbuotoją</a>';
	

	?>
	
	 
	<div class = "workers">
		<?php echo $content;?>
	</div>
	<div class = "addWorkerForm" style = "display:none;"> 
		<form id = "new"  method="post"><h3>Naujas darbuotojas</h3> 
				 <input type="hidden" value="" name="filename" /> <!-- siame kintamajame saugosim uploadinto paveiksliuko failo varda -->
				 <input type="hidden" name = "filename" value="" />
				 <label>Vardas*: </label><input type="text" name = "name_new" value="" /><span class = "errorSmall error_name"></span><br />
				 <label>Pavardė: </label><input type="text" name = "lastname_new" /><span class = "errorSmall error_lastname"></span><br />
				 <label>Pareigos: </label><input type="text" name = "position_new" /><span class = "errorSmall error_position"></span><br />
				 <label>Apibūdinimas: </label>
				 
				 
				 
				 <?php 
				 $data = array(
		              'name'        => 'descr_new',
		              'size'        => '1000',
		              'style'       => 'height:15em'
		            );
		        
				echo form_textarea($data);
				 ?>
				 <span class = "errorSmall error_descr"></span>
				 

				 <label>Kategorija: </label>
				 <select name = "category_new">
				 <?php 
				 	echo '<option value="choose">Pasirinkite</option>';
				 	foreach($categories as $cat)
				 	{
				 		echo '<option value="'.$cat->cat_id.'">'.$cat->name.'</option>'; 
				 	}
				 ?>
				</select>
				 <br><br><input type="submit" class = "submit" value="Išsaugoti" />
		</form>
	</div>
	
	<!-- <?php echo base_url()?>admin_/darbuotojai/update_worker" method="post -->
	<div class = "edit_worker_form" style = "display:none;"> 
		<form id = "edit" action = "" method ="post" ><h3>Darbuotojo redagavimas</h3>
				  
				 <input type="hidden" name = "id" value="" /><br />
				 <label>Vardas*: </label><input type="text" name = "name" value="" /><span class = "errorSmall error_name"></span><br />
				 <label>Pavardė: </label><input type="text" name = "lastname" /><span class = "errorSmall error_lastname"></span><br />
				 <label>Pareigos: </label><input type="text" name = "position" /><span class = "errorSmall error_position"></span><br />
				 <label>Apibūdinimas: </label>
				 				 
				 <?php 
				 $data = array(
		              'name'        => 'descr',
		              'size'        => '1000',
		              'style'       => 'height:15em',
		              'id' => 'txaEditableContent'
		            );
		        
				 echo form_textarea($data);
				 ?>
				 <span class = "errorSmall error_descr"></span>
				 <label>Kategorija: </label>
				 <select name = "category">
				 <?php 
				 	echo '<option value="choose">Pasirinkite</option>';
				 	foreach($categories as $cat)
				 	{
				 		echo '<option value="'.$cat->cat_id.'">'.$cat->name.'</option>'; 
				 	}
				 ?>
				</select>
				 <br><br><input type="submit" class = "submit" value="Išsaugoti" />
		</form>
		
	</div>
	 
	
			
		<div class = "managePictures">
				<div class="wrapper">
					<div id="button1" class="button" style = "display:none">Įkelti nuotrauką</div>
				</div>
				
			
			<br>
			<a class = "del_picture" style = "display:none" href="#">Ištrinti nuotrauką</a>
			<div class = "foto"></div>
		</div>
	
	
<!-- main ends -->	
		</div>

So from the index function view file gets content in this line:

<?php echo $content;?>

In my example there user doesn't change files, but it doesn't matter, stil there are different files.

But in your code

a.hover {background-image: url(your_file_path.jpg);
border:none;
}

I don't understand - this code is in css file, and we only can use one image file which will be defined in css. So how this could work with different files?

Edit: of I forget - actually the user can change the files - in div with class "managePictures". But it is the same problem whether he can or cannot change files - it still shows that backgroud if I don't use additional class for links like I did.

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

Probably my code exapmles are too difficult to understand. But thanks for trying to help. As long as I have found the way around for this its ok :)

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

No your code isn't too difficult to understand, but, and I dont mean this bad, I have a hard time understanding your english. You also keep saying one thing then changing it and saying another.

You're also not posting ALL of your html code and your css code.

I'm still confused as to what exactly you are trying to do. You want to remove the border from images? or from any <a href> tags?

teedoff
Practically a Master Poster
605 posts since Jul 2010
Reputation Points: 21
Solved Threads: 60
Skill Endorsements: 0

No problem now, as I said I found the way around so its ok. If some day I will not be able to find the way around then I will ask :)

SPeed_FANat1c
Posting Pro
512 posts since Apr 2010
Reputation Points: 13
Solved Threads: 18
Skill Endorsements: 0

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
View similar articles that have also been tagged:
 
© 2013 DaniWeb® LLC
Page generated in 0.1032 seconds using 2.76MB