5 Replies Latest reply on Jun 3, 2010 9:56 AM by Zabeth69

    on event properties

    iconofsin14 Level 1

      i dont know the correct terminology so this is going to be a little long

      winded

       

      look at the following code

       

      <style type="text/css">
      #test:hover {
      background-color:#CF9;
      }
      </style>

       

      #test is the object id

      :hover is the event that must occur before the code is applied

      the rest is the code itself

       

      normally dreamweaver prompts you

      for example when i press enter to go down to the line with background on it it shows a list of all avalable commands

       

      however this does not happen at the point where i have used :hover

       

      so how am i supposed to know what other commands are alaliable at this point?

      could someone point me to a list of commands that can be used at the point where i have used hover so i can experement with them

       

      finally

      i wrote the code manually

      is there a way to use the hover command (and any other command that could have been used at the point) without using code view

        • 1. Re: on event properties
          Zabeth69 Level 5

          I've never tried to attach :hover to an id or a class. I think you need to attach it to the tag itself: a li for instance. I've not tried it on a div, either. Classes and IDs are not 'things' the way tag items are things...you can't hover over a class or an id...you hover over the link (a) or the list item (li).

           

          Beth

          • 2. Re: on event properties
            iconofsin14 Level 1

            I attached :hover to an a-tag using css

            i linked it to the atag using the class id

            • 3. Re: on event properties
              Zabeth69 Level 5

              Right. You may specify which tag to format via the ID or the Class, but you may not format the ID or Class itself, just the tag.

               

              Like this; you have

              <style type="text/css">
              #test:hover {
              background-color:#CF9;
              }
              </style>

              you want to have

              <style type="text/css">
              #test a:hover {
              background-color:#CF9;
              }
              </style>

              if the a tag is inside an element with the id of test (div#test, for instance). Note the space I left between #test and the a:hover.

               

              The html will look something like this:

              <div id="test"><a href="#">This is the text that will be formatted with the background color</a>

              </div>

              Beth

              • 4. Re: on event properties
                iconofsin14 Level 1

                are you saying that if i use

                #test a:hover

                 

                the rule will be applied to all a tags (and only a tags) but only if they are inside elements with the ID test?

                 

                this is not really what i was getting at

                :hover applies an effect on mousover and removes it on mouse off

                 

                other events a person could want to use are on right click, on mouse off only, on mouse on only, when the mouse goes over a different area of the screen ect

                how would i go about replacing :hover with these, and how many examples of these can you give me to experement with.

                 

                finally could i apply an effect to an element/tag when the mouse hovers over something entirely different. 

                • 5. Re: on event properties
                  Zabeth69 Level 5

                  Yes. that is what I am saying.

                   

                  Yes, :hover applies a 'link' effect when the mouse cursor goes over it and changes back when it goes off. It is solely a CSS effect, not a 'behavior,' as such, as those are javascript.

                   

                  You are correct that onclick, onmouseoff, onmouseon, etc., are events...they are used for javascript behaviors, but not for CSS.

                   

                  To use a javascript behavior, select an object (an image or a piece of text that has been made an object by this code:

                  <a href="javascript:;">Text to be made an object</a>

                  The behaviors panel will allow you to add and edit behaviors to that object.

                   

                  Here is a link that explains behaviors: http://www.adobe.com/devnet/dreamweaver/articles/ora_dw_cs4_mm.html One of the chapters treats behaviors.

                   

                  Yes, you can use a show/hide behavior to create a disjoint rollover: hover your mouse over one object and change a different element. Check out McFarland's chapter about behaviors (reference above).

                   

                  Beth