переполнение не работает только при динамическом изменении изображения - PullRequest
Новая
       7

переполнение не работает только при динамическом изменении изображения

0 голосов
/ 29 сентября 2018

Когда «tvlivehover» становится истинным, изображение, которое имеет это условие для показа внутри своего родителя, теряет переполнение и перебирает div.в то время как изображение, которое показывает, когда «tvlivehover» становится ложным, совершенно нормально и получает стиль переполнения.Вот мой HTML: 

<template>
<div class="tvcontent" v-bind:class="tvlivehover">
    <img v-bind:src="tv.item.image" style="width: 350px;
    height: 265px;"/>
    <div class="rastetv">
        <img src="../assets/images/five/rastetv-norm.png"
             v-show="tvlivehover == '' ? true : false"/>
        <img src="../assets/images/five/rastetv.png" v-show="tvlivehover ==  '' ? false : true"/>
        <div class="title-tv" style="width: 80px; margin-right: 15px; top: 3px;">
            {{tv.item.position}}
        </div>
    </div>
    <div class="chapetv">
        <img src="../assets/images/five/chapetv-norm.png" v-show="tvlivehover == '' ? true : false"
        />
        <img src="../assets/images/five/chapetv.png" v-show="tvlivehover == '' ? false : true"/>
        <div class="title-tv" style="width: 255px; margin-right: 20px; top: 3px;">
            {{tv.item.title}}
        </div>
    </div>
</div>

и это мои стили: 

<style scoped>
.tvcontent {
    width: 349px;
    height: 263px;
    border-radius: 10px 10px 0px 10px;
    margin-right: 40px;
    overflow: hidden !important;
    margin-top: 25px;
    display: inline-block;
}

.tvlivehover {
    transition: 0.4s;
    transform: scale(1.08);
}

.rastetv {
    position: absolute;
    text-align: right;
    margin-top: -52px;
    margin-right: -3px;
    width: 82px;
    height: 44px;
    overflow: hidden;
}

.chapetv {
    position: absolute;
    text-align: right;
    margin-top: -48px;
    margin-right: 67px;
    width: 311px;
    height: 37px;
    overflow: hidden;
}

...