مشکل در استفاده از تگ a در transition

[ABZiko]

سلام، بنده این کد رو نوشتم :


<div class="imageHover"><a href="#"><img src="Images/UPVC Win.jpg" width="100%" height="auto" style="border-radius:550px" /></a></div>

به تگ div و img یک سری tyransition دادم که هر موقع هور شدن، یک box-shadow بگیرن، اما موقعی که تگ a رو اضافه می کنم، هیچ اتفاقی نمی افته. چرا؟
ممنون

[ABZiko]

دوستان، ممنون می شم اگر کمک کنید.

[Omid Jackson]

CSS هم قرار بدین

[ABZiko]

بفرمائید :


.imageHover{
border:8px solid #D99F3E;
border-radius:550px;
transition:ease 1s}

.imageHover:hover{
background-color:#D99F3E;
-webkit-box-shadow: inset 0px 0px 182px 20px rgba(0,0,0,0.78);
-moz-box-shadow: inset 0px 0px 182px 20px rgba(0,0,0,0.78);
box-shadow: inset 0px 0px 182px 20px rgba(0,0,0,0.78)}

.imageHover img{
transition:ease 1s}

.imageHover > img:hover{
opacity:0.45}

[Omid Jackson]

اون box-shadow که زیر میفته، شما عکس میذارین معلوم نمیشه، برای opacity که روی عکس گذاشتین هم استفاده از < هم جا و مکان خاص داره که اینحا غلط هست

.imageHover img:hover {
opacity:0.45
}
با
.imageHover > img:hover {
opacity:0.45
}
خیلی فرق دارن، اولی یعنی div، هر عکسی که داخلش بود موقعیتش فرق نداره (میخواد فرزندش باشه یا فرزند فرزندش یا ...)
ولی دومی یعنی div، بعد دقیقا عکسی که فرزندش هست، که شامل فرزند فرزند و ... نمیشه، فقط یک سطح پایین تر

[ABZiko]

واقعا ممنونم ازتون.