یک مشکل در سایت

[yasharhi]

درسایت زیر
http://growbs.ir/1g/Untitled-1.html
همونطور که می بینید وقتی روی آیکن ها می رم بصورت متحرک در می آد حالا چطور می تونم کاری کنم که وقتی روی متن هم می ره باز هم همون آیکن حرکت کنه
بطور مثال در شکل زیر وقتی کاربر بر روی متن میره آیکن بالای اون حرکت کنه

http://8pic.ir/images/ifbcpo390ttvz3rzo7tb.png

[دانیال دزفولی]

نیازی به جی کوری نیست :|

باکس بندی کن

col-lg-3:hover .icon
{
color :red
}

[yasharhi]

خودمم اولش همین کار رو کردم ولی نتیجه نگرفتم .تگ p رو به hover ها اضافه کردم ولی کار نکرد .

[دانیال دزفولی]

خودمم اولش همین کار رو کردم ولی نتیجه نگرفتم .تگ p رو به hover ها اضافه کردم ولی کار نکرد .
اگه همین کاری رو گفتم بکنی مشکلی پیش نمیاد

[yasharhi]

اگه همین کاری رو گفتم بکنی مشکلی پیش نمیاد
به اول کدوم یکی از اینا col-lg-3:hover اضافه کنم ؟! چون به همشون اضافه کردم و هیچ کدوم جواب نداد

@import url("default.css");
@font-face {
font-family: 'ecoicon';
src:url('../fonts/ecoicons/ecoicon.eot');
src:url('../fonts/ecoicons/ecoicon.eot?#iefix') format('embedded-opentype'),
url('../fonts/ecoicons/ecoicon.woff') format('woff'),
url('../fonts/ecoicons/ecoicon.ttf') format('truetype'),
url('../fonts/ecoicons/ecoicon.svg#ecoicon') format('svg');
font-weight: normal;
font-style: normal;
}

.hi-icon-wrap {
text-align: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 2em;
padding-right: 0;
padding-bottom: 2em;
padding-left: 0;
}

.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}

.hi-icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.hi-icon:before {
font-family: 'ecoicon';
speak: none;
font-size: 48px;
line-height: 90px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
display: block;
-webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
content: "\e009";
}

.hi-icon-screen:before {
content: "\e00a";
}

.hi-icon-earth:before {
content: "\e002";
}

.hi-icon-support:before {
content: "\e000";
}

.hi-icon-locked:before {
content: "\e001";
}

.hi-icon-cog:before {
content: "\e003";
}

.hi-icon-clock:before {
content: "\e004";
}

.hi-icon-videos:before {
content: "\e005";
}

.hi-icon-list:before {
content: "\e006";
}

.hi-icon-refresh:before {
content: "\e007";
}

.hi-icon-images:before {
content: "\e008";
}

.hi-icon-pencil:before {
content: "\e00b";
}

.hi-icon-link:before {
content: "\e00c";
}

.hi-icon-mail:before {
content: "\e00d";
}

.hi-icon-location:before {
content: "\e00e";
}

.hi-icon-archive:before {
content: "\e00f";
}

.hi-icon-chat:before {
content: "\e010";
}

.hi-icon-bookmark:before {
content: "\e011";
}

.hi-icon-user:before {
content: "\e012";
}

.hi-icon-contract:before {
content: "\e013";
}

.hi-icon-star:before {
content: "\e014";
}

/* Effect 1 */
.hi-icon-effect-1 .hi-icon {
background: rgba(255,255,255,0.1);
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.hi-icon-effect-1 .hi-icon:after {
top: -7px;
left: -7px;
padding: 7px;
box-shadow: 0 0 0 4px #fff;
-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
-webkit-transform: scale(.8);
-moz-transition: -moz-transform 0.2s, opacity 0.2s;
-moz-transform: scale(.8);
-ms-transform: scale(.8);
transition: transform 0.2s, opacity 0.2s;
transform: scale(.8);
opacity: 0;
}

/* Effect 1a */
.no-touch .hi-icon-effect-1a .hi-icon:hover {
background: rgba(255,255,255,1);
color: #41ab6b;
}

.no-touch .hi-icon-effect-1a .hi-icon:hover:after {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

[دانیال دزفولی]

:|



col-lg-3:hover .hi-icon
{
color :red
}

[amirali0079]

با جی کوئری میشه :

<script>
$(document).ready(function(){
$("p").hover(function(){
$("icon").addClass(classhover);
},function(){
$("icon").addClass(Class asli);
});
});
</script>


کارت را میوفته میتونی hover و click رو هم خودت بزاری خیلی راحته
جای icon آی دی یا کلاس یا اسم المنتی که آیکون ها توسط اون اومده را بزار مثل img یا #img_icon
جا p اسم یا آی دی یا ... متن رو بزار

[yasharhi]

:|



col-lg-3:hover .hi-icon
{
color :red
}


نه اصلا اینطوری کار نمیکنه .
به کد hi icon هم نگاه کنی متوجه میشی که چرا کار نمی کنه .

.hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}

[yasharhi]

با جی کوئری میشه :

<script>
$(document).ready(function(){
$("p").hover(function(){
$("icon").addClass(classhover);
},function(){
$("icon").addClass(Class asli);
});
});
</script>


کارت را میوفته میتونی hover و click رو هم خودت بزاری خیلی راحته
جای icon آی دی یا کلاس یا اسم المنتی که آیکون ها توسط اون اومده را بزار مثل img یا #img_icon
جا p اسم یا آی دی یا ... متن رو بزار

یعنی با css راهی نداره ، من تازه کار با جیکوئری رو شروع کردم و زیاد باهاش آشنا نیستم

[دانیال دزفولی]

عزیز من
خوب با اونی که دادم رنگش عوضش میشه من تست کردم با مرور گر هیچ مشکلی نبود این کد رو هم تست کن


.col-lg-3:hover .hi-icon{ color : red !important}

[yasharhi]

عزیز من
خوب با اونی که دادم رنگش عوضش میشه من تست کردم با مرور گر هیچ مشکلی نبود این کد رو هم تست کن


.col-lg-3:hover .hi-icon{ color : red !important}


بابا رنگش رو می خواهم چیکار .الان وقتی روی آیکن میرم آیکن تغییر میکنه . حالا وقتی میخواهم روی متن هم برم آیکن تغییر کنه .
وقتی کد رو به این تغییر می دم کلا آیکن ها به هم میریزه و با رفتن روی متن هم آیکن تغییر نمی کنه


.col-lg-3:hover .hi-icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 15px 30px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}

[yasharhi]

کسی راه کاری نداره ؟!

[_mojitaba_]

خب عزیز شما h4 , p رو داخل a بزاری درست میشه دیگه

[yasharhi]

خب عزیز شما h4 , p رو داخل a بزاری درست میشه دیگه

ممنون از راهنماییت - اینکار رو کردم ولی متن داخل تگ p ناپدید شد

[_mojitaba_]

به p یک font-size بدید درست میشه ولی وسط نیست
کلا استایل bottom-4 شکل زیر میشه


margin-bottom: 40px;
font-size: 12px;
position: relative;
width: 310px;
right: 116%;


البته این بنظر من غیر استاندارده ولی اینجوری اون چیزی که شما میخوای در میاد

[yasharhi]

ممنون از لطفتون درست شد . اینکه میگید استاندارد نیست کجاش مشکل داره ؟ ( تو validator چک کردم و error نگرفت )
راه حل اساسی و اصولیش چیه ؟

[_mojitaba_]

ممنون از لطفتون درست شد . اینکه میگید استاندارد نیست کجاش مشکل داره ؟ ( تو validator چک کردم و error نگرفت )
راه حل اساسی و اصولیش چیه ؟

نمیدونم اما احساس میکنم اصولی نیست حالا کار شما که راه افتاده :لبخند:
validator فقط کد ها و تگ های html رو چک میکنه فکر کنم