html-css change img hover -


I am trying to convert image hover to another picture which I found is not working for me yet is. Here's my HTML 

  & lt; Div id = "navbar" & gt; & Lt; Table style = "margin-left: automatic; margin-right: auto;" & Gt; & Lt; TR & gt; & Lt; Td> & Lt; A href = "index.html" & gt; Div id = "navbar_button" style = "background-image: url (images / navbar_home page); width: 213px;" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "play.html" & gt; Div id = "navbar_button" style = "background-image: url (images / navbar_playong); width: 213px;" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "home / index.php" & gt; & Lt; Div id = "navbar_button" style = "background-image: url (images / navbar_forum.); Width: 213px;" & Gt; ; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "highscores.php" & gt; & Lt; Div id = "navbar_button" style = "background-image: url (images / navbar_highscore.png); width: 213px;" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;   
 and my css  
  #navbar {background-image: url (../images/navbar_bg.png); Height: 88px; Width: 100%; Margin: 0; Padding: 0; Status: Completed; Top: 0; Left: 0; } #navbar_button {height: 88px; } #navbar_button: Hover {Opacity: 0.9; Filter: Alpha (Opacity = 90); }     
 
 
 You should not use the same ID for more than one element ID unique Identifier and it should be unique, this is your problem.  
 So you need to convert it to class instead of id:  
  .navbar_button {height: 88px; Width: 213px; } .navbar_button: Hover {Opacity: 0.9; Filter: Alpha (Opacity = 90); } & Lt; Div id = "navbar" & gt; & Lt; Table style = "margin-left: automatic; margin-right: auto;" & Gt; & Lt; TR & gt; & Lt; Td> & Lt; A href = "index.html" & gt; Div class = "navbar_button" style = "background-image: url (images / navbar_home page);" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "play.html" & gt; Div class = "navbar_button" style = "background-image: url (images / navbar_playnoogi);" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "home / index.php" & gt; & Quot; Div class = "navbar_button" style = "background-image: url (images / navbar_forum);" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "highscores.php" & gt; Div class = "navbar_button" style = "background-image: url (images / navbar_hghscoser page);" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;   
 But with this you can not change the image to change the image, change the image and you need to use the ID and give another div + another image + id :  
  .navbar_button {height: 88px; } # Navbar_button1: hover {background-image: url (whatever1.png); } # Navbar_button2: hover {background-image: url (whatever2.png); } & Lt; Div id = "navbar" & gt; & Lt; Table style = "margin-left: automatic; margin-right: auto;" & Gt; & Lt; TR & gt; & Lt; Td> & Lt; A href = "index.html" & gt; Div class = "navbar_button" id = "navbar_button1" style = "background-image: url (images / newbar_home page); width: 213px;" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; Td> & Lt; A href = "play.html" & gt; Div class = "navbar_button" id = "navbar_button2" style = "background-image: url (images / navbar_playnoji); width: 213px;" & Gt; & Lt; / Div & gt; & Lt; / A & gt; & Lt; / TD & gt; & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; Another move:  Use one of the solutions with the classes and use an image that has a normal and hover position (tile) on it (normal state and right-hand hover image). Just write in your CSS:  
  .navbar_button {background-repeat: no duplication; Background position: ok, height: 88px; Width: 213px; } .navbar_button: hover {background-position: left; Opacity: 0.9; Filter: Alpha (Opacity = 90); }   
     
  1.  Your image should match the container's height and width on the image, otherwise it does not look good.  
  2.  You have a big load on images, because they are large in file  
  3.  but you do not need to load the image on rotation and on slow server / browser / bandwidth There is no flicker  
  4.  With this you don? T need to write IDs for each image inside your CSS.

Comments

Post a Comment

Popular posts from this blog

Python SQLAlchemy：AttributeError: Neither 'Column' object nor 'Comparator' object has an attribute 'schema' -

I tried to create a new database in my project, but when I run the script, I get this error, I have another project, this type of definition worked before, but now it gets a single error. I am using Python 2.7.8 and the version of SQLAlchemy module is 0.9.8. By the way, using a project flask- SQLAlchemy, it works well, I'm confused. Traceback information is as follows: Traceback (most recent call final): File "D: / Projects / IOM / db_create.py", line 4, & lt; Module & gt; From the models the base file "D: \ Projects \ OO-IM \ models.py", in line 15, in the & lt; Module & gt; Column ( 'followed_id', int (), ForeignKey ( 'user.id')) file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ schema.py", line 369, __new__ schema = metadata. Schema file "C: \ Python27 \ lib \ site-packages \ SQLAlchemy \ SQL \ elements.py", line 662, AttributeError in __getattr__ key): Neither 'column' object nor ...
Read more

java - How not to audit a join table and related entities using Hibernate Envers? -

I use Eners to be hibernate to audit my institutions. I have an audit entity, Foo , which includes a list & lt; Bars & gt; However, I do not want to audit the bar institutions, in the form of properties, I have written that: @inti @edicated public class Foo {@JoinTable (name = "T_FOO_BAR", joinColumns = @JoinColumn (name = "FOO_ID"), inverseJoinColumns = @JoinColumn (Name = "BAR_ID")) @ManyToMany (Cascade = Persist) @ Indited (targetAuditMode = RelationTargetAuditMode.NOT_AUDITED ) Public listing & lt; Bars & gt; GetBars () {Return bars; }} Now, I want to retrieve an amendment of foo : AuditReader reader = AuditReaderFactory.get (GetEntityManager ()); FU modification = (FU) reader.CreativeTeA () .entensEtrevision (Foo Class, 42) .getSingleResult (); Unfortunately, when I want to retrieve all the data (i.e. when it loads lazy times ), error me ORA-00942: table or view is not present , because Tried to query this: Sel...
Read more

mongodb - CakePHP paginator ignoring order, but only for certain values -

While pagging my user model in kppp, I can sort with some values, but not others. For example, I can order results from created or email , for example, but username or reputation seems to come back order by arbitrary command for example with a list of users: $ this-> paginate = array ('condition' => array ( 'User.is_active' = & gt; true), 'border' => 24, 'order' => array ('User.created' => DESC)); Works as expected, but $ this - & gt; Paged = array ('conditions' = & gt; array (' user.isIactive '= & gt; true),' border '= & gt; 24,' command '= & gt; array (' user repeats' = ' & Gt; DESC ')); No, no. I first thought that this could be a database issue, but when I search the database directly, sorted as expected. Note: I am using Mangodebi with the Mongo DB plugin of Ichikawa for the KPPHP; Pagnetizing users are used to work properl...
Read more