چطور تو سی اس اس متن وارد کنم

MOHCEN · دی 92

چطوری وقتی موس رفت روی دکمه اسمش پایینش نوشته بشه؟ می شه تو hover متن نوشت؟

SM-Mahdavi · دی 92

به عنوان مثال ساختار زیر رو داریم:


<ul>
<li> <h3></h3></li>
</ul>

با دستور زیر h3 داخل li رو نشون میده:


h3{display:none;}
ul li:hover h3{display:block;}

یه transition هم می تونید بهش بدین که جذاب تر بشه.

Ghasem Paran · دی 92

سی اس اس :


<style>
span{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
</style>

اچ تی ام ال :


<p>Hover here<span>some text here ?</span></p>

از tooltip استفاده کنید بهتره ...

http://jqueryui.com/tooltip

ویرایش شده دی 92 توسط Ghasem Paran

MOHCEN · دی 92

هر دو جواب برام جدید بود تشکر.

ولی من می خوام یه دایو بصورت دکمه داشته باشم که وقتی موس رفت روش یه کمی بره بالا و اسمش زیرش نوشته بشه. مثل این فایل فلش http://hiat.blogfa.com/

**Parsa** · دی 92

با hover لینک تصویر

میتوانید نوشته زیر مجموعه را display: block کنید

نمونه


<div class="imgWrap">
  <img src="whatever.jpg" alt="polaroid" />
  <p class="imgDescription">This image looks super neat.</p>
</div>



.imgWrap {
  position: relative;
  height: 200px;
  width: 257px;
}
.imgDescription {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;

  visibility: hidden;
  opacity: 0;
  /*remove comment if you want a gradual transition between states
  -webkit-transition: visibility opacity 0.2s;
  */
}

.imgWrap:hover .imgDescription {
  visibility: visible;
  opacity: 1;
}

http://stackoverflow.com/questions/14263594/how-to-show-text-on-image-when-hovering

Alireza Xn · دی 92

دوستان منم یک سوالی داشتم گفتم دیگه تاپیک نزنم و همینجا مطح کنم

چطوری میشه توی css یک هاور از بالا به پایین درست کرد نمونش مثلا قالب جدید سایت دانلودها رو اگر ببنید کلیک کنید توی بلوک برتین مطالب ها هاور تب ها از پایین به بالا هاور میشه ..

این کدش به چه صورت هستش ؟؟

Ghasem Paran · دی 92

دوستان منم یک سوالی داشتم گفتم دیگه تاپیک نزنم و همینجا مطح کنم
چطوری میشه توی css یک هاور از بالا به پایین درست کرد نمونش مثلا قالب جدید سایت دانلودها رو اگر ببنید کلیک کنید توی بلوک برتین مطالب ها هاور تب ها از پایین به بالا هاور میشه ..
این کدش به چه صورت هستش ؟؟

باید در hover :

background-position را تفییر بدید.

MOHCEN · دی 92

سعی خودمو مبذول داشتم اینو بسازم hiat.blogfa.com

شد این


<body>
<div class="imgWrap">
  <img src="1.png" alt="polaroid" />
  <p class="imgDescription">يادداشت ها</p>
  </div>
</body>


<!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" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<style>
.imgWrap {
margin:100px auto;
position: relative;
height: 100px;
width: 70px;
transition: margin 300ms ,;
-moz-transition: width 2s;
-webkit-transition: margin 1s , height 1s;
-o-transition: margin 300ms;
}
.imgDescription {
position: absolute;
height: 20px;
width: 75px;
top:00px;
padding-top:55px;
color: #000;
font-family: Adobe Arabic;
font-size: 17pt;
visibility: visible;
opacity: 0;
/*remove comment if you want a gradual transition between states
-webkit-transition: visibility opacity 0.2s;
*/
}
.imgDescription:hover {
visibility: visible;
opacity: 1;
}
.imgWrap:hover {
visibility: visible;
opacity: 1;
margin-top:85px;
}
</style>
<body>
<div class="imgWrap">
<img src="1.png" alt="polaroid" />
<p class="imgDescription">يادداشت ها</p>
</div>
</body>
</html>

چطوری باید یه hover برای هر دو قرار بدم؟

در عین حال متن همراه تصویر بالا نیاد؟

ویرایش شده دی 92 توسط MOHCEN

imanfakhar · دی 92


.imgWrap p {
display:none;}
.imgWrap:hover p {
display:block;
}

سعید حسینی · دی 92

ولی من می خوام یه دایو بصورت دکمه داشته باشم که وقتی موس رفت روش یه کمی بره بالا و اسمش زیرش نوشته بشه. مثل این فایل فلش http://hiat.blogfa.com/

سلام

منظورتون به این صورته که متن ثابت باشه؟

http://jsfiddle.net/7mg8c/

ورود

چطور تو سی اس اس متن وارد کنم

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

MOHCEN 3

لینک به ارسال

SM-Mahdavi 5427

لینک به ارسال

Ghasem Paran 333

لینک به ارسال

MOHCEN 3

لینک به ارسال

Parsa 23463

لینک به ارسال

Alireza Xn 1644

لینک به ارسال

Ghasem Paran 333

لینک به ارسال

MOHCEN 3

لینک به ارسال

imanfakhar 26231

لینک به ارسال

سعید حسینی 2409

لینک به ارسال

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

فهرست بخش ها

فعالیت ها