FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

simple dhtml effect help

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


imagefree
i have a code of HTML like

Code:
<ul>
 <li class="li1" >abc<div class="class_for_div" >Sometext</div></li>
 <li class="li2" >def</li>
 <li class="li3" >ghi</li>
</ul>


now what i want is CSS styles or JS, so that when i move the mouse over the first li, the background of the DIV inside the li changes.

Need instant help!.

Thanks

Last edited by imagefree on Tue Oct 28, 2008 6:54 am; edited 1 time in total
badai
Code:
<ul>
 <li class="li1">abc<div class="class_for_div" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='';">Sometext</div></li>
 <li class="li2">def</li>
 <li class="li3">ghi</li>
</ul>


since you already assigned class to your div, the style can be set in <style> tag. figure it out!
imagefree
thanks for your help, but the solution you provided is not what i asked.
what you provided can easily be done with .class_for_div :hover
what i want is that when i move the mouse over li, the style of DIV change.

if you need, you can add id="first_li" to the first list item.

Please reply again.
Thanks
quasar
Try

Code:

<html>

    <head>
        <script type="text/javascript">
        function red() {
           var div = document.getElementById("class_for_div"); div.style.backgroundColor='red';
        }
        function out() {
           var div = document.getElementById("class_for_div"); div.style.backgroundColor='';
        }
        </script>
    </head>

    <body>
<ul>
 <li class="li1" onmouseover=red(); onmouseout=out()>abc<div id="class_for_div">Sometext</div></li>
 <li class="li2">def</li>
 <li class="li3">ghi</li>
</ul>

    </body>
</html>



Atention: replace class=class_for_div ===> id=class_for_div
imagefree
quasar wrote:
Try

Code:

<html>

    <head>
        <script type="text/javascript">
        function red() {
           var div = document.getElementById("class_for_div"); div.style.backgroundColor='red';
        }
        function out() {
           var div = document.getElementById("class_for_div"); div.style.backgroundColor='';
        }
        </script>
    </head>

    <body>
<ul>
 <li class="li1" onmouseover=red(); onmouseout=out()>abc<div id="class_for_div">Sometext</div></li>
 <li class="li2">def</li>
 <li class="li3">ghi</li>
</ul>

    </body>
</html>



Atention: replace class=class_for_div ===> id=class_for_div


thanks it works. One more thing. Can you please modify the function to change the class of the tag using the is given to the function. (ie. donot change colour, change class to class_for_div_2).
quasar
Code:


<head>
<script type="text/javascript">
function red() {
var div = document.getElementById("class_for_div");
div.style.backgroundColor='red';
div.setAttribute("id","class_for_div_2");

}
</script>
</head>

<body>
<ul>
<li class="li1" onmouseover=red();>abc<div id="class_for_div">Sometext</div></li>
<li class="li2">def</li>
<li class="li3">ghi</li>
</ul>

</body>
</html>


Marcuzzo
this doesn't change the ID, but it is wtitten with lesser code
Code:


<html>
    <head>
<script type="text/javascript">    
function swapColor(divObj){
   divObj = document.getElementById(divObj);
   divObj.style.backgroundColor=='red' ? divObj.style.backgroundColor='' :divObj.style.backgroundColor='red';
}   
</script>
    </head>

    <body>
<ul>
  <li class="li1" onmouseover='swapColor("class_for_div");' onmouseout='swapColor("class_for_div");' >abc<div id="class_for_div">Sometext</div></li>
 <li class="li2">def</li>
 <li class="li3">ghi</li>
</ul>
    </body>
</html>
Related topics
dHTML menu help wanted
Site Nav Suggestions...
More Simple Machine Forums Help
help and hello
[coder needed] Javascript
Linkproblems (might be wrong section?)
They call me Relevant_grace... :-p
need help with blog??		Need some opinions on sigs and ads.
Good songs to learn
Anything is POSSIBLE!
Filming Resource
What is Truth
help please
pimples ?
simple webserver on cable line.		Help, I need LWP::Simple perl module!!
Anyone care to help me with a simple PHP Form ?
Please help me with this Geography debate
Windows XP SP3 comming soon
Sending simple emails using PERL - Help required
CSS help with existing "roll overs"
embedding javascript menu simple problem
Adding dhtml and ajax features... plz help !
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.