قم بتغيير CSS للطفل الأول عند التمرير على الأصل

Question

كمان العينة هنا:http://jsfiddle.net/3cYtX/12/

لدي عنصر يمثل صورة (على سبيل المثال، شاشة صورة فيديو) وعنصر فرعي يمثل صورة أخرى (على سبيل المثال، 90 × 60، رمز "التشغيل").

<div class="big">
    <img class="small">
</div>

يتم توسيط الصورة الصغيرة عموديًا وأفقيًا.

أريد عندما أكون فوق كبير صورة صغير واحد تغيير التعتيم.

الكود أدناه يعمل فقط عندما أحوم فوق صغير صورة.

.small {
    opacity: 0.5;
}
.small:hover {
    opacity: 0.9;
}

هل هناك طريقة لإصلاح ذلك (التغيير عند التمرير فوق ملف كبير صورة) فقط عبر CSS؟

Answer 1

انت تستطيع فعل ذالك :

.big:hover .small{

  // do stuff
}

افحص هذا كمان

ملحوظة:أنا استخدم div بدلاً من img عنصر هنا.

Answer 2

.big {
    width:200px;
    height:150px;
    background-color: green;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.small {
    opacity: 0.9;
    background: red;
    width:90px;
    height:60px;
}
.big:hover > .small {
    opacity: 0.5;
}

كمان تجريبي