5 replies to this topic

[Alladaskill17]

See: https://www.molten-wow.com/ for what I am talking about, along with screenshot:
->

[pack34]

You could always use javascript and change the display css property for the box when you hover over it

[Alladaskill17]

pack34, on 05 February 2012 - 21:16, said:

You could always use javascript and change the display css property for the box when you hover over it

I know very little, and definitely have no knowledge of javascript and limited CSS, think you could provide an example? I am trying to sift through their code to understand how it works, failing.

[primexx]

very easy with CSS, here's the pseudo-code (two alternatives)

#1: parent is shown, child is what shows up on hover (works with any element, including lists)


<parent>
<child></child>
</parent>


child {
 display:none; #hides it by default
}

parent:hover child {
 display:block; #display child when parent is hovered
}

# you can add animation with css 3 transitions, google it

#2: expand a single element

<element></element>

element {
height:100px; # some arbitrary property
overflow:hidden; # possibly hide the overflow, which will allow you to put more content in the element than the collapsed form can fit, and will show up when the element expands on hover
}

element:hover {
height:200px; # a new value for that property when you hover on it
}

# you can add animation same as above.

[Alladaskill17]

primexx, on 05 February 2012 - 22:46, said:

very easy with CSS, here's the pseudo-code (two alternatives)

#1: parent is shown, child is what shows up on hover (works with any element, including lists)


<parent>
<child></child>
</parent>


child {
display:none; #hides it by default
}

parent:hover child {
display:block; #display child when parent is hovered
}

# you can add animation with css 3 transitions, google it

#2: expand a single element

<element></element>

element {
height:100px; # some arbitrary property
overflow:hidden; # possibly hide the overflow, which will allow you to put more content in the element than the collapsed form can fit, and will show up when the element expands on hover
}

element:hover {
height:200px; # a new value for that property when you hover on it
}

# you can add animation same as above.

Wow, see this (I think) is what I am looking for, however, where do I place this? Header or body? or different parts in different spots? I am very unskilled, and apologize if I come across as stupid!? Could I get actual, non pseudo-code or would this work plugged into the proper spots?

[primexx]

the stuff with < and > is the html which represents your actual box, i included it to show you how it relates to the CSS styles, which is what the rest of it is. that goes with all the other CSS styles you have.