i have a problem
i'm trying to edit a website
it has a scroller (behavior is like a inverted waterfall)
the website shows events (data) already recorded in the database...
i want to change the font size of the scroller, i tried to change all the labels there and nothing.
this is the CSS block
<style type="text/css">
body {
font-family: "Engravers MT", "Engravers MT",sans-serif;
line-height: 1em;
color: #f0edd9;
font-weight:bold;
font-size: 40px;
background-color:#8A0829;
}
pscroller1{
width: 500px;
height: 560px;
font-family: "old republic", "old republic";
font-size:50px;
border: 1px solid black;
padding: 5px;
background: red;
}
</style>
this is the scroller, i didn't do that, it was made by someone else.
<script type="text/javascript">
var pausecontent=new Array()
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
here is how it set the message in the scroller
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
this is the body:
<body>
<!--<div align="center">
<img src="picture1.fw.png" align="absmiddle"/>
</div>
!-->
<div align="LEFT" style="width:1000px ">
<div style="height:570px; width:50%; float:right; background-color:#8A0829">
<?php
require_once('functions.php');
$phparray=events();
for($i=0; $i <count($phparray); $i++ )
{
echo '<script language="JavaScript"> pausecontent['.$i.'] = "'.$phparray[$i].'";</script>';
}
?>
<script type="text/javascript" >
document.writeln("EVENTS")
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("<br />")
function refresh(time) {setTimeout("location.reload(true);",time);}
refresh(43200000); </script>
</div>
</div>
<div align="right"> EVENTS</div>
<div align="center" style="height:570px; width:300px; float:LEFT; background- color:#8A0829">
<embed src="video.vob" autostart="true" loop ="true" width="500" height="570" >
</div>
</div>
<div align="center">
<img src="background.jpg" align="absmiddle"/>
</div>
</body>
like you can see in the
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("")
the pscroller1 should change the font color and size of the pausecontent but it does only change the style of the font of the data, although the return data of document.write (UNDEFINED) is working fine, it's size, style and color can be changed
pscroller1 is not an html entity. You cannot style it like that.
You can add an ID or a class to the 'pscroller' and style that
a{ <- html entity
.someClass{ <- styling a class
#someID{ <- styling an ID
Related
I'm developing the news feed by using jquery and php. I'm using 2 div for this.
Here If the main div reached at the bottom It should wrap automatically.
<html>
<div id="main">
<?php
for($i=0;$i<15;$i++)
{
?>
<div id="sub">hai</div>
<?php
}
?>
</div>
</html>
Script:
<script src="at/js/jquery.js"></script>
<script>
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
</script>
Style:
<style>
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
}
</style>
You can solve this using CSS clear:left; and float:left; property.
Check this demo jsFiddle
HTML
<div id="main">
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
</div>
CSS
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
clear:left;
float:left;
}
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
Also you can solve dynamically assign css property,
Check this demo jsFiddle
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
$("#sub").css({
border: "solid 2px #000000",
height: "30%",
width: "20%",
clear: "left",
float: "left"
});
}
});
Use prependTo jQuery function instead of appendTo
I have two DIV's that are side by side. One div is my side bar (Left Of Screen), the other div is my main content (Right Of Screen).
What I'm looking for:
What I want is one visable scroll bar to the far right of the screen. I would like that scrol bar to scroll both left and right div's.
My Problem:
Currently my left sidebar has a tree menu. When I expand my tree menu, I have no scroll bar to scroll down through the side bar content that was expanded. I'm able to add a scroll bar to my side bar, but that looks very ugly. I just want 1 scroll bar on the far right that handles both div's.
Can someone help me on this one?
My index.php file
<?php
include 'sidebar.php';
include 'main_body.php';
?>
My sidebar.php
<?php
echo '<link rel="stylesheet" href="css/style.css" type="text/css">';
echo '<script type="text/javascript" src="js/jquery1_3_2.js"></script>';
include 'function/functions.php';
// Establish a connection to our database
db_connect();
echo'
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function()
{
jQuery(this).next(".content").slideToggle(500);
});
});
</script>
';
echo'<div class="sidebar">';
// Side Bar Start
echo '
<img src="images/hdc_logo.png">
<br>
<br>
<p class="heading"><strong>CUSTOMER</strong></p>
<div class="content">';
//Display all customers from database
query_all_customers();
echo '</div>
<p class="heading"><strong>CABINET</strong></p>
<div class="content">';
// Display all cabinets from database
query_all_cabinets();
echo'</div>
</div>';
?>
My main content area
<?php
ini_set('display_errors', 1);
echo '<div class="main">';
echo'
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here
<br>
<br>
Some data can go here
<br>
<br><br>
<br>
and here
<br>
<br>
and here';
?>
My .css file
.sidebar {
width:200px;
position:fixed;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
/*overflow-y: scroll;*/
}
.main {
width: auto;
margin-left: 200px;
}
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
}
.content {
padding: 5px 10px;
}
#submit {
width:185px;
background-color: black;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
color: #fff;
font-family:'Oswald';
font-size: 16px;
text-decoration: none;
cursor: pointer;
border:none;
}
#submit:hover {
border: none;
background:#FF9933;
box-shadow: 0px 0px 1px #777;
}
tr:nth-of-type(odd) {
background-color:#D4D4D4;
}
.container0 {
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
padding-bottom: 30px;
background-color:black;
}
JSFiddle
in your css, set position of the sidebar to relative and set float to left, like this:
.sidebar {
width:200px;
position:relative;
top:0px;
left:0px;
height:100%;
background-color:#54524F;
float:left
}
the updated version of your jsfiddle to show you that it works :) http://jsfiddle.net/BrJDE/3/
because you dont want to have the scrollbar at the side of the page, i made some more examples for you. tell me if they are what you want, if its not, i would love to help you again.
both of these examples use 2 additional divs compared to the content you provided. these will make that you can position the scrollbar inside those div's instead of at the side of the browser. if you need me to explain the changes i made, just tell me.
scrollbar inside the page:
http://jsfiddle.net/BrJDE/6/
scrollbar inside the page at the left side of the scrolling div:
http://jsfiddle.net/BrJDE/5/
I have a main php file that loads an external php file. This is the code in my main php file:
<php>
<head>
<meta http-equiv="content-type" content="text/php; charset=utf-8" />
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="ajax.js"></script>
<link rel="stylesheet" href="colorbox.css" />
<script src="js/jquery.colorbox.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.colorbox-min.js"></script>
<link href="jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script type="text/javascript">
$().ready(function() {
$('.jimgMenu ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad'});
});
</script>
</head>
<div id="tengah" class="jimgMenu" >
<ul>
<li class="landscapes"> </li>
<li class="people"> </li>
<li class="nature"> </li>
</ul>
</div>
<div id="content" class="clearfix shadow">
<div id="sidebar" class="left">
<div id='ResponseDiv'> </div>
<div id="menu" class="inner">
</div>
</div>
<div id="main" class="right">
<h2>Detail</h2>
<div id='ResponseDiv2'> </div>
</div>
</div>
</div>
</php>
I have a function in ajax.js that calls an external php page named ajaxpage. Here the code in ajax.js:
function ajaxpage(url, containerid) {
var page_request = false
if(window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if(window.ActiveXObject) { // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} catch(e) {
try {
page_request = new ActiveXObject("Microsoft.XMLHTTP")
} catch(e) {}
}
} else return false
page_request.onreadystatechange = function () {
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}
function loadpage(page_request, containerid) {
if(page_request.readyState == 4 && (page_request.status == 200 || window.location.href.indexOf("http") == -1)) document.getElementById(containerid).innerHTML = page_request.responseText
}
The problem is when I try to load "7.php" into my main.php the 7.php file is loaded but the animation in 7.php not working.
Does anyone know why this is happening?
this is the content of 7.php
<php>
<html>
<head>
<style type="text/css">
body {
background: #0F0D0D;
padding: 30px 0 0 50px;
}
div.sc_menu_wrapper {
position: relative;
height: 500px;
/* Make bigger than a photo, because we need a place for a scrollbar. */
width: 160px;
margin-top: 30px;
overflow: auto;
}
div.sc_menu {
padding: 15px 0;
}
.sc_menu a {
display: block;
margin-bottom: 5px;
width: 130px;
border: 2px rgb(79, 79, 79) solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
/* When image support is turned off */
color: #fff;
background: rgb(79, 79, 79);
}
.sc_menu a:hover {
border-color: rgb(130, 130, 130);
border-style: dotted;
}
.sc_menu img {
display: block;
border: none;
}
.sc_menu_wrapper .loading {
position: absolute;
top: 50px;
left: 10px;
margin: 0 auto;
padding: 10px;
width: 100px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
text-align: center;
color: #fff;
border: 1px solid rgb(79, 79, 79);
background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
display: block;
position: absolute;
padding: 6px;
font-size: 12px;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid rgb(79, 79, 79);
background: rgb(0, 0, 0);
/* Make background a bit transparent for browsers that support rgba */
background: rgba(0, 0, 0, 0.5);
}
/* Here are styles for a link to an article. Not for you :) */
#back {
margin-left: 8px;
color: gray;
font-size: 18px;
text-decoration: none;
}
#back:hover {
text-decoration: underline;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">/*<![CDATA[*/
function makeScrollable(wrapper, scrollable){
// Get jQuery elements
var wrapper = $(wrapper), scrollable = $(scrollable);
// Hide images until they are not loaded
scrollable.hide();
var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
// Set function that will check if all images are loaded
var interval = setInterval(function(){
var images = scrollable.find('img');
var completed = 0;
// Counts number of images that are succesfully loaded
images.each(function(){
if (this.complete) completed++;
});
if (completed == images.length){
clearInterval(interval);
// Timeout added to fix problem with Chrome
setTimeout(function(){
loading.hide();
// Remove scrollbars
wrapper.css({overflow: 'hidden'});
scrollable.slideDown('slow', function(){
enable();
});
}, 1000);
}
}, 100);
function enable(){
// height of area at the top at bottom, that don't respond to mousemove
var inactiveMargin = 99;
// Cache for performance
var wrapperWidth = wrapper.width();
var wrapperHeight = wrapper.height();
// Using outer height to include padding too
var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We could use onresize event, but it's just not worth doing that
// var wrapperOffset = wrapper.offset();
// Create a invisible tooltip
var tooltip = $('<div class="sc_menu_tooltip"></div>')
.css('opacity', 0)
.appendTo(wrapper);
// Save menu titles
scrollable.find('a').each(function(){
$(this).data('tooltipText', this.title);
});
// Remove default tooltip
scrollable.find('a').removeAttr('title');
// Remove default tooltip in IE
scrollable.find('img').removeAttr('alt');
var lastTarget;
//When user move mouse over menu
wrapper.mousemove(function(e){
// Save target
lastTarget = e.target;
var wrapperOffset = wrapper.offset();
var tooltipLeft = e.pageX - wrapperOffset.left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
// Move tooltip under the mouse when we are in the higher part of the menu
if (e.pageY - wrapperOffset.top < wrapperHeight/2){
tooltipTop += 80;
}
tooltip.css({top: tooltipTop, left: tooltipLeft});
// Scroll menu
var top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
if (top < 0){
top = 0;
}
wrapper.scrollTop(top);
});
// Setting interval helps solving perfomance problems in IE
var interval = setInterval(function(){
if (!lastTarget) return;
var currentText = tooltip.text();
if (lastTarget.nodeName == 'IMG'){
// We've attached data to a link, not image
var newText = $(lastTarget).parent().data('tooltipText');
// Show tooltip with the new text
if (currentText != newText) {
tooltip
.stop(true)
.css('opacity', 0)
.text(newText)
.animate({opacity: 1}, 1000);
}
}
}, 200);
// Hide tooltip when leaving menu
wrapper.mouseleave(function(){
lastTarget = false;
tooltip.stop(true).css('opacity', 0).text('');
});
/*
//Usage of hover event resulted in performance problems
scrollable.find('a').hover(function(){
tooltip
.stop()
.css('opacity', 0)
.text($(this).data('tooltipText'))
.animate({opacity: 1}, 1000);
}, function(){
tooltip
.stop()
.animate({opacity: 0}, 300);
});
*/
}
}
$(function(){
makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
</script>
</head>
<body>
<div style="overflow: hidden;" class="sc_menu_wrapper">
<div style="display: block;" class="sc_menu">
</div>
<div style="display: none;" class="loading">Loading...</div><div style="opacity: 0;" class="sc_menu_tooltip"></div></div>
</body></html>
</php>
See Hotel
This code will work...
I created a simple login webpage complete with CSS and Background images etc.
It uses PHP to access the database when you click LOGIN/SUBMIT.
The problem is when I do the testing/viewing using the Localhost in WAMP.
It displays the form and other content such as text and paragraphs..but the background images and images used as the border and button of the login page doesn't show. It just shows the broken image icon.
When I open the php page in the browser it displays everything the only thing it doesn't do right is the lookup in the database but that's understandable since the PHP server is in WAMP.
How do I make the images display correctly in the Localhost in WAMP?
Here's the code of my login page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/cssLoginPage.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow('#dialog1');
//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$(window).resize(function () {
var box = $('#boxes .window');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set height and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
box.css('top', winH/2 - box.height()/2);
box.css('left', winW/2 - box.width()/2);
});
});
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
$(id).css('top', 10);
$(id).css('left', 780);
/*
//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);
*/
//transition effect
$(id).fadeIn(2000);
}
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="boxes">
<!-- Start of Login Dialog -->
<div id="dialog1" class="window">
<div class="d-header">
<form name="form1" method="post" action="loginproc.php">
<input name="myusername" type="text" id="myusername" value="username" onclick="this.value=''"/><br/>
<input name="mypassword" type="password" id="mypassword" value="Password" onclick="this.value=''"/>
</div>
<div class="d-blank"></div>
<div class="d-login"><input type="image" alt="Login" title="Login" src="./css/images/login-button.png"/></div>
</form>
</div>
<!-- End of Login Dialog -->
</div>
</div>
</body>
</html>
Here's the CSS:
#charset "utf-8";
/* CSS Document */
.loginTable {
width:300px; margin: 250px auto;
box-shadow: 1px 1px 3px #000;
}
body
{
background:url(../css/images/homepage.jpg)no-repeat top center;
}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:fixed;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#boxes #dialog1 {
width:375px;
height:203px;
}
#dialog1 .d-header {
background:url(../css/images/login-header.png) no-repeat 0 0 transparent;
width:375px;
height:150px;
}
#dialog1 .d-header input {
position:relative;
top:60px;
left:100px;
border:3px solid #cccccc;
height:22px;
width:200px;
font-size:15px;
padding:5px;
margin-top:4px;
}
#dialog1 .d-blank {
float:left;
background:url(../css/images/login-blank.png) no-repeat 0 0 transparent;
width:267px;
height:53px;
}
#dialog1 .d-login {
float:left;
width:108px;
height:53px;
}
#boxes #dialog2 {
background:url(../css/images/notice.png) no-repeat 0 0 transparent;
width:326px;
height:229px;
padding:50px 0 20px 25px;
The src in the image tag needs to be like this:
<div class="d-login">
<input type="image" alt="Login" title="Login"
src="/css/images/login-button.png"/>
</div>
Note that the src property no longer has .. Also, make sure the image is in the www folder.
When the user is hovering on a radio button/its label i want to display another radio button, that user can also select but if mouse moves the 2nd radio button hides again. i have found this last jquery snipet that shows choices while hovering on link tag
http://www.stylesfirst.com/coding/easy-show-hide-with-jquery/
<html>
<head>
<style type="text/css">
p.trigger {
padding: 0 0 0 20px;
margin: 0 0 5px 0;
background: url(plusminus.jpg) no-repeat;
height: 15px;
font-size: 14px;
font-weight: bold;
float:left;
}
p.trigger a {
color: #474747;
text-decoration: none;
display: block;
cursor:pointer;
}
p.trigger a:hover {
color: #ff4b43;
}
p.active {
background-position: left bottom;
}
.toggle_container {
margin: 0 0 5px;
padding: 0;
overflow: hidden;
clear: both;
}
.toggle_container .block {
padding: 0px 0px 0px 15px;
}
</style>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.toggle_container').hide();
jQuery('p.trigger').hover(function(){
jQuery(this).toggleClass('active').next().toggle('slow');
});
});
</script>
</head>
<body>
<p class="trigger"><a>Click here</a></p>
<div class="toggle_container">
<div class="block">
<input id='element_1_1' name='element_1' class='element radio' type='radio' value='8'/>
<label class='choice' for='element_1_1'>Somewhere in the middle</label>
</div>
</div>
</body>
</html>
The easiest answer would be, if you could afford it, put both <input type="radio"/>s under a <div/> and control hovering behavior on that <div/>. This is commonly done with menus for the very same purpose.
Plus if you target new browsers, you can leave jQuery out of this - it can be done with any browser that understands the :hover pseudo-class on non-<a/>s.
Here's a sample page demonstrating both options.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#radios').hover(
function() { $('#radios').addClass('hover'); },
function() { $('#radios').removeClass('hover'); }
);
});
</script>
<style type="text/css">
/* option 1 - jquery + css, for older browsers */
#div-radio2 {
display: none;
}
.hover #div-radio2 {
display: block;
}
/* option 2 - no jquery, plain css, if you target only new browsers */
#radios:hover #div-radio2 {
display: block;
}
</style>
</head>
<body>
<div id="radios">
<div id="div-radio1"><input type="radio" id="radio1" /><label for="radio1">Radio 1</label></div>
<div id="div-radio2"><input type="radio" id="radio2" /><label for="radio2">Radio 2</label></div>
</div>
</body>
</html>
Are you looking for something like this
http://jsfiddle.net/HezZa/