View Div When A Hover

У меня есть полоса с картинками, которые я хочу навести на них, и текст появляется под картинкой с изображением.View Div When A Hover

Я думаю, что есть проблема с CSS. И если вы можете это сделать, возможно, попробуйте также перейти на работу.

Вот CSS и HTML:

.procat{ 
 
    background-color: #555555; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
.procat img{ 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
.procath{ 
 
    display: none; 
 
    transition: 1s; 
 
} 
 
.procath a.procath:hover{ 
 
    display: block; 
 
    transition: 1s; 
 
    background-color:dimgrey; 
 
}

<div class="procat"> 
 
       <a class="tb" href="ThunderBird"> 
 
        <img width="100px" height="100px" src="pic/icons/phone.png"> 
 
       </a> 
 
       <a href="ZeroBook"> 
 
        <img width="100px" height="100px" src="pic/icons/laptop.png"> 
 
       </a> 
 
       <a href="ProjectTime"> 
 
        <img width="100px" height="100px" src="pic/icons/car.png"> 
 
       </a> 
 
       <div class="procath"> 
 
        <h6> 
 
         ThunderBird 
 
        </h6> 
 
       </div> 
 
      </div>

источник

2016-10-29 Max Koon

вы хотите, чтобы показать DIV, который имеет заголовок с содержанием «ThunderBird», когда любой изображения зависают? – repzero

display свойство не может быть переведен. Вместо этого используйте visibility, а также используйте правильные селектор. Эта ссылка должна объяснить больше о затрагивая другие элементы при наведении курсора мыши: How to affect other elements when a div is hovered

Кроме того, решение ниже

.procat{ 
 
    background-color: #555555; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
.procat img{ 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
.procath{ 
 
    visibility: hidden; 
 
    transition: 1s; 
 
} 
 
.procat a:hover ~ .procath{ 
 
    visibility:visible; 
 
    transition: 1s; 
 
    background-color:dimgrey; 
 
}

<div class="procat"> 
 
       <a class="tb" href="ThunderBird"> 
 
        <img width="100px" height="100px" src="pic/icons/phone.png"> 
 
       </a> 
 
       <a href="ZeroBook"> 
 
        <img width="100px" height="100px" src="pic/icons/laptop.png"> 
 
       </a> 
 
       <a href="ProjectTime"> 
 
        <img width="100px" height="100px" src="pic/icons/car.png"> 
 
       </a> 
 
       <div class="procath"> 
 
        <h6> 
 
         ThunderBird 
 
        </h6> 
 
       </div> 
 
      </div>

источник

2016-10-29 15:13:56 Varin

FWIW 'visibility' и' display' - разные, не совсем взаимозаменяемые свойства с различными приложениями; «видимость» означает, что элемент занимает пространство макета в любом случае (это почти то же самое, что просто использовать «непрозрачность», который будет более плавно переходить на IMO). Это одна из тех простых проблем, которая всегда заканчивается более сложным решением. –

@BenSaufley Это правда, я предположил, что OP не знает, что 'display' не может быть вызвано« переходом », поэтому я предложил решение с использованием« видимости ». Единственный способ сделать это при использовании 'display' будет использовать JavaScript. – Varin

View Div When A Hover

ответ

Смежные вопросы