triggering events wtih css

Discussion in 'HTML' started by Jon Slaughter, Mar 23, 2007.

  1. is it possible to trigger events with css or is it purely a static scripting
    language? I have a menu that contains sub menu's and when the user clicks on
    the main link I want to set the visibility to show the sub menu(and ofcourse
    hide the visibility for all other sub menu's). Is the only way to
    accomplish this with js or does css have some ability to handle things like
    this?

    Thanks,
    Jon
     
    Jon Slaughter, Mar 23, 2007
    #1
    1. Advertising

  2. Jon Slaughter

    Ben C Guest

    On 2007-03-23, Jon Slaughter <> wrote:
    > is it possible to trigger events with css or is it purely a static scripting
    > language? I have a menu that contains sub menu's and when the user clicks on
    > the main link I want to set the visibility to show the sub menu(and ofcourse
    > hide the visibility for all other sub menu's). Is the only way to
    > accomplish this with js or does css have some ability to handle things like
    > this?


    This kind of thing is possible to some degree with CSS. RTFM "pseudos",
    "pseudoselectors", :hover and the visibility property.
     
    Ben C, Mar 23, 2007
    #2
    1. Advertising

  3. "Ben C" <> wrote in message
    news:...
    > On 2007-03-23, Jon Slaughter <> wrote:
    >> is it possible to trigger events with css or is it purely a static
    >> scripting
    >> language? I have a menu that contains sub menu's and when the user clicks
    >> on
    >> the main link I want to set the visibility to show the sub menu(and
    >> ofcourse
    >> hide the visibility for all other sub menu's). Is the only way to
    >> accomplish this with js or does css have some ability to handle things
    >> like
    >> this?

    >
    > This kind of thing is possible to some degree with CSS. RTFM "pseudos",
    > "pseudoselectors", :hover and the visibility property.


    But how can you modify a property of some other style? e.g., If I hover over
    a button I want to set the visibility property of a table.

    For example, suppose I have

    #SomeTable {
    visibility:hidden;
    }

    a:hover
    {
    SomeTable.visibility:visible;
    }

    ....

    <table id="SomeTable">
    </table>

    <a href=" ">Link</a>

    -----------

    Can I change the properties of other styles within a style? I'll read up on
    css and see if I can find the answer but I don't think of I have seen
    anything like before.

    Thanks,
    Jon
     
    Jon Slaughter, Mar 23, 2007
    #3
  4. Jon Slaughter

    chrisv Guest

    On Mar 23, 5:08 pm, "Jon Slaughter" <> wrote:
    > "Ben C" <> wrote in message
    >
    > news:...
    >
    > > On 2007-03-23, Jon Slaughter <> wrote:
    > >> is it possible to trigger events with css or is it purely a static
    > >> scripting
    > >> language? I have a menu that contains sub menu's and when the user clicks
    > >> on
    > >> the main link I want to set the visibility to show the sub menu(and
    > >> ofcourse
    > >> hide the visibility for all other sub menu's). Is the only way to
    > >> accomplish this with js or does css have some ability to handle things
    > >> like
    > >> this?

    >
    > > This kind of thing is possible to some degree with CSS. RTFM "pseudos",
    > > "pseudoselectors", :hover and the visibility property.

    >
    > But how can you modify a property of some other style? e.g., If I hover over
    > a button I want to set the visibility property of a table.
    >
    > For example, suppose I have
    >
    > #SomeTable {
    > visibility:hidden;
    >
    > }
    >
    > a:hover
    > {
    > SomeTable.visibility:visible;
    >
    > }
    >
    > ...
    >
    > <table id="SomeTable">
    > </table>
    >
    > <a href=" ">Link</a>
    >
    > -----------
    >
    > Can I change the properties of other styles within a style? I'll read up on
    > css and see if I can find the answer but I don't think of I have seen
    > anything like before.
    >
    > Thanks,
    > Jon



    assuming table and href are in the same div, you could probably use
    class inheritance and contextual definitions to get the desired
    effect.
     
    chrisv, Mar 24, 2007
    #4
  5. "chrisv" <> wrote in message
    news:...
    > On Mar 23, 5:08 pm, "Jon Slaughter" <> wrote:
    >> "Ben C" <> wrote in message
    >>
    >> news:...
    >>
    >> > On 2007-03-23, Jon Slaughter <> wrote:
    >> >> is it possible to trigger events with css or is it purely a static
    >> >> scripting
    >> >> language? I have a menu that contains sub menu's and when the user
    >> >> clicks
    >> >> on
    >> >> the main link I want to set the visibility to show the sub menu(and
    >> >> ofcourse
    >> >> hide the visibility for all other sub menu's). Is the only way to
    >> >> accomplish this with js or does css have some ability to handle things
    >> >> like
    >> >> this?

    >>
    >> > This kind of thing is possible to some degree with CSS. RTFM "pseudos",
    >> > "pseudoselectors", :hover and the visibility property.

    >>
    >> But how can you modify a property of some other style? e.g., If I hover
    >> over
    >> a button I want to set the visibility property of a table.
    >>
    >> For example, suppose I have
    >>
    >> #SomeTable {
    >> visibility:hidden;
    >>
    >> }
    >>
    >> a:hover
    >> {
    >> SomeTable.visibility:visible;
    >>
    >> }
    >>
    >> ...
    >>
    >> <table id="SomeTable">
    >> </table>
    >>
    >> <a href=" ">Link</a>
    >>
    >> -----------
    >>
    >> Can I change the properties of other styles within a style? I'll read up
    >> on
    >> css and see if I can find the answer but I don't think of I have seen
    >> anything like before.
    >>
    >> Thanks,
    >> Jon

    >
    >
    > assuming table and href are in the same div, you could probably use
    > class inheritance and contextual definitions to get the desired
    > effect.


    A site I found uses display:block and display:unknown or all child lists
    inside the link. It works in IE7 and FF 2.0 but not sure about IE6. They
    mention something about having to use behaviors to get it to work there but
    I'm probably just going to take the easy route and require a modern browser
    to view my site.
     
    Jon Slaughter, Mar 24, 2007
    #5
  6. Jon Slaughter wrote:

    >
    > A site I found uses display:block and display:unknown


    There is *no* property "display: known"

    > or all child lists
    > inside the link.


    You cannot put "block" elements withing an "A" element.
    > It works in IE7 and FF 2.0 but not sure about IE6. They


    Pseudo class :hover only works on "A" elements in MSIE <=6 (not sure if
    7 now supports it. For MSIE your either have to supplement with
    JavaScript or an HTA file.

    > mention something about having to use behaviors to get it to work there but
    > I'm probably just going to take the easy route and require a modern browser
    > to view my site.
    >
    >


    DIV.peekaboo DIV { display: none; }
    DIV.peekaboo:hover DIV { display: block; }


    <div class="peekaboo">
    The nested DIV will appear when you hover a mouse over
    me in a modern web browser...
    <div>Hello World!</div>
    </div>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 24, 2007
    #6
  7. "Jonathan N. Little" <> wrote in message
    news:95a41$46049c37$40cba7cb$...
    > Jon Slaughter wrote:
    >
    >>
    >> A site I found uses display:block and display:unknown

    >
    > There is *no* property "display: known"
    >


    yeah, I ment none.

    >> or all child lists inside the link.

    >
    > You cannot put "block" elements withing an "A" element.


    No, I ment that inside the lists. Each element in the list is a link or
    another list.

    >> It works in IE7 and FF 2.0 but not sure about IE6. They

    >
    > Pseudo class :hover only works on "A" elements in MSIE <=6 (not sure if 7
    > now supports it. For MSIE your either have to supplement with JavaScript
    > or an HTA file.
    >


    Yeah, this is the issue that the site was dealing with.

    >> mention something about having to use behaviors to get it to work there
    >> but I'm probably just going to take the easy route and require a modern
    >> browser to view my site.

    >
    > DIV.peekaboo DIV { display: none; }
    > DIV.peekaboo:hover DIV { display: block; }
    >
    >
    > <div class="peekaboo">
    > The nested DIV will appear when you hover a mouse over
    > me in a modern web browser...
    > <div>Hello World!</div>
    > </div>
    >


    Ok, thanks. This was essentially what the code I was looking at was doing
    but with lists instead. I was initially trying to use the visibility
    property but that didn't work so well.

    Thanks,
    Jon
     
    Jon Slaughter, Mar 24, 2007
    #7
  8. Jon Slaughter wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:95a41$46049c37$40cba7cb$...
    >> Jon Slaughter wrote:
    >>
    >>> A site I found uses display:block and display:unknown

    >> There is *no* property "display: known"
    >>

    >
    > yeah, I ment none.


    Good 'cuz "known" won't work.
    >
    >>> or all child lists inside the link.

    >> You cannot put "block" elements withing an "A" element.

    >
    > No, I ment that inside the lists. Each element in the list is a link or
    > another list.


    Still will have the ol'MS problem because IE will not recognize LI:hover
    >
    >>> It works in IE7 and FF 2.0 but not sure about IE6. They

    >> Pseudo class :hover only works on "A" elements in MSIE <=6 (not sure if 7
    >> now supports it. For MSIE your either have to supplement with JavaScript
    >> or an HTA file.
    >>

    >
    > Yeah, this is the issue that the site was dealing with.
    >


    What site? None was referenced. I used the HTA method to attached the
    DIV:hover for IE on this page that has non-js hover on diagrams if you
    wish to see an example in practice:

    http://www.littleworksstudio.com/Amberlithe/articles/2
    Article: Finer points: What's a Rhomboid? - Amberlithe Ibizan Hounds



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Mar 24, 2007
    #8
  9. Jon Slaughter

    Ben C Guest

    On 2007-03-23, Jon Slaughter <> wrote:
    >
    > "Ben C" <> wrote in message
    > news:...
    >> On 2007-03-23, Jon Slaughter <> wrote:
    >>> is it possible to trigger events with css or is it purely a static
    >>> scripting
    >>> language? I have a menu that contains sub menu's and when the user clicks
    >>> on
    >>> the main link I want to set the visibility to show the sub menu(and
    >>> ofcourse
    >>> hide the visibility for all other sub menu's). Is the only way to
    >>> accomplish this with js or does css have some ability to handle things
    >>> like
    >>> this?

    >>
    >> This kind of thing is possible to some degree with CSS. RTFM "pseudos",
    >> "pseudoselectors", :hover and the visibility property.

    >
    > But how can you modify a property of some other style? e.g., If I hover over
    > a button I want to set the visibility property of a table.
    >
    > For example, suppose I have
    >
    > #SomeTable {
    > visibility:hidden;
    > }
    >
    > a:hover
    > {
    > SomeTable.visibility:visible;
    > }


    You can put pseudos anywhere in the selector, so e.g.:

    #something:hover span
    {
    visibility: visible;
    }

    Makes spans that are descendents of the hovered #something visible.

    You can just about do nested pop-up menu systems with this kind of
    thing.

    If the hovered node and the node whose properties you want to switch are
    related in ways not expressible in CSS selectors you'll need to use JS
    instead.

    [...]
    > Can I change the properties of other styles within a style?


    No.

    > I'll read up on css and see if I can find the answer but I don't think
    > of I have seen anything like before.


    If you mean like this:

    > a:hover
    > {
    > SomeTable.visibility:visible;
    > }


    then nor have I!
     
    Ben C, Mar 26, 2007
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. avinashrk
    Replies:
    10
    Views:
    4,762
    Andrew Thompson
    Dec 14, 2004
  2. chris patton

    the problem wtih cgi

    chris patton, May 28, 2005, in forum: Python
    Replies:
    3
    Views:
    305
    Ivan Van Laningham
    May 29, 2005
  3. pizza
    Replies:
    1
    Views:
    540
    Eliyahu Goldin
    Mar 8, 2007
  4. Scott Murray

    DG Start wtih Row 0 in Edit Mode?

    Scott Murray, Aug 1, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    3
    Views:
    145
    Scott Murray
    Aug 1, 2003
  5. Barrow H Kwan

    rbx wtih Apache 2

    Barrow H Kwan, Jun 30, 2003, in forum: Ruby
    Replies:
    1
    Views:
    119
    John Feezell
    Jun 30, 2003
Loading...

Share This Page