css - selecting images with links hover

[McLaren]

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.

[McLaren]

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/

[shaya4207]

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

[McLaren]

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.

[shaya4207]

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

[teedoff]

Shouldnt it be:

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

If I'm understanding what you want completely.

[McLaren]

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.

[McLaren]

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.

[teedoff]

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.

[shaya4207]

Yeah, please post either the code or the link

[McLaren]

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.

[McLaren]

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

[teedoff]

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?

[McLaren]

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