رفتن به مطلب

تغییر محتوای یک div با hover


پست های پیشنهاد شده

3div دارم.چطور می تونم محتوای یک div رو با رفتن روی آن تغییر بدهم ؟ محتوی متن و عکس هست.کد زیر رو نوشتم ولی با رفتن روی یکی از div ها ، div ای که با رفتن روی آن ظاهر می شود پایین می افند.


$(".div-circle").hover(function(){
root=$(this);
$(this).find('.circle').fadeOut('fast',function(){root.find('.circle-hover').fadeIn('fast');});

},function(){
root=$(this);
$(this).find('.circle-hover').fadeOut('fast',function(){root.find('.circle').fadeIn('fast');});
});

div با آی دی های circle-hover و circle ،div هایی هستند که جابجا می شوند و div-circle والد است.

لینک به ارسال


<div class="span4 div-circle">
<div class="circle"><img src="img/img2.png" alt=""/></div>
<div class="circle-hover">
<a href="#" class="a1"></a>
<a href="#" class="a1"></a>
<a href="#" class="a1"></a>
<a href="#" id="text-over">متن</a>
</div>
<span class="text-circle">متن</span>
</div>


.circle{margin:70px 45px 10px;behavior: url(PIE.htc);position:relative;border-radius:250px;-o-border-radius:250px;-webkit-border-radius:250px;-moz-border-radius:250px;-ms-border-radius:250px;height:220px;width:220px;}
.circle-hover{behavior: url(PIE.htc);position:relative;border-radius:250px;-o-border-radius:250px;-webkit-border-radius:250px;-moz-border-radius:250px;-ms-border-radius:250px;margin:70px 45px 10px;height:220px;width:220px;display:none;background:url(../img/bg-circle-over.png) no-repeat;}
.text-circle{text-align:center;display:inline-block;width:100%;color:#000;font:18px 'BYekan'; }

لینک به ارسال

کدوم محتوا رو می خواهید با چی تغییر دهید

این کد را فرضی نوشتم البته با jquery هم می شه منتهی چون بعضی قالب ها باهاش مشکل دارند js نوشتم


<script type="text/javascript">
<!--
function mytext2()
{
document.getElementById('myId').innerHTML="محتوای دوم"
}
function mytext1()
{
document.getElementById('myId').innerHTML="محتوای اول"
}
//-->
</script>
<div id="myId" onmouseover="mytext2()" onmouseout="mytext1()">
محتوای اول
</div>

لینک به ارسال

سلام

فکر کنم منظورشون با استفاده از CSS بوده و خاصیت hover باید به این صورت استفاده کنید:


اشتباه:
.circle-hover{}
درست:
.circle:hover{}

CSS :hover Selector

و این مثال ها کمکتون خواهد کرد:

CSS mouseover for links, text, and images :


http://www.scientificpsychic.com/etc/css-mouseover.html

+

پنهان کردن دکمه

لینک به ارسال

کدوم محتوا رو می خواهید با چی تغییر دهید

این کد را فرضی نوشتم البته با jquery هم می شه منتهی چون بعضی قالب ها باهاش مشکل دارند js نوشتم


<script type="text/javascript">
<!--
function mytext2()
{
document.getElementById('myId').innerHTML="محتوای دوم"
}
function mytext1()
{
document.getElementById('myId').innerHTML="محتوای اول"
}
//-->
</script>
<div id="myId" onmouseover="mytext2()" onmouseout="mytext1()">
محتوای اول
</div>

محتوای div که over میشه زیاده ،راهی غیر از innerHtml ، میشه کد خودم را اصلاح کنید؟

اشتباه:

.circle-hover{}

درست:

.circle:hover{}

نام کلاس circle-hover هست

لینک به ارسال

کدهای جی کوئری توی


$(document).ready(function()
{
//jquery
});

قرار میگیرن .

این مورد رو لحاظ نکردید.

لینک به ارسال

برای متن های کوتاه می تونید از کد css هم استفاده کنید


content:"متن ";

برای متن و کدهای طولانی مثل مورد شما هم می شه از آژاکس استفاده کرد و هم کد css

به شکل زیر


<style type="text/css">
#text1,.main:hover #text2 {
display:block;
}
.main #text2,.main:hover #text1 {
display:none;
}
</style>
<div class="main">

<div id="text1">
<p>یک متن حاوی کدهای html</p>
</div>

<div id="text2">
<p>یک متن دیگر حاوی کدهای html</p>
</div>

</div>

لینک به ارسال

کدهای جی کوئری توی


$(document).ready(function()
{
//jquery
});

قرار میگیرن .

این مورد رو لحاظ نکردید.

اینجا نگذاشتم . در فایل این دستور رو نوشتم

ببینید همچین چیزی منظورتون هست؟

http://jsfiddle.net/5x53c/2/

محتوا ها داخل مربع هستند.خارج از آن نیستن. یعنی مربع باید تغییر کند.کدی که اینجا

گذاشتم محتوا رو تغییر میده ولی وقتی پست سر هم روی آنها میرم hover پایین می افته

لینک به ارسال

برای متن های کوتاه می تونید از کد css هم استفاده کنید


content:"متن ";

برای متن و کدهای طولانی مثل مورد شما هم می شه از آژاکس استفاده کرد و هم کد css

به شکل زیر


<style type="text/css">
#text1,.main:hover #text2 {
display:block;
}
.main #text2,.main:hover #text1 {
display:none;
}
</style>
<div class="main">

<div id="text1">
<p>یک متن حاوی کدهای html</p>
</div>

<div id="text2">
<p>یک متن دیگر حاوی کدهای html</p>
</div>

</div>

چیزی شبیه اینه. ولی سه تا رو که در یک ردیف می ذارم ، وقتی ماوس رو روی آنها میبرم دیوی که با hover ظاهر میشه می افته پایین

لینک به ارسال

بجای div از المان span استفاده کنید دیگه پایین نمیوفته چون div جزء بلاک هاست ولی span المان برخط هست.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...