CSS: когда img1: hover - img2 скрыт и наоборот

У меня есть два изображения, закодированные в XSL. Метод вывода - HTML. Я бы хотел скрыть образ, на котором :hover не активен.

XSL:

 <div id = "img-col-block">
  <a target = "_blank" href = "{id(substring(@facs, 2))/graphic[@n='1']/@url}" id = "{id(substring(@facs, 2))/graphic[@n='1']/@url}">
   <img src = "{id(substring(@facs, 2))/graphic[@n='1']/@url}" id = "img-col"/>
  </a>
  <a target = "_blank" href = "{id(substring(@facs, 2))/graphic[@n='2']/@url}" id = "{id(substring(@facs, 2))/graphic[@n='2']/@url}">
   <img src = "{id(substring(@facs, 2))/graphic[@n='2']/@url}" id = "img-colv"/>
  </a>
 </div>

CSS:

  #img-col {height: 4%; width: 4%; border: 3px solid #fff; border-radius: 8px;  margin:  2px 5px -14px;  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-colv {height: 4%; width: 4%; border: 2px solid orange; border-radius: 8px;  margin:  4px 0px -12px 8px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-col:hover, #img-colv:hover {width: 97%; margin-left: 0.1%; margin-bottom: 10px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}

Пример изображений, отображаемых в браузере до :hover: CSS: когда img1: hover - img2 скрыт и наоборот Таким образом, если действие :hover выполняется над изображением "# img-col", тогда изображение "# img-colv" должно быть скрыто. Если действие :hover выполняется с изображением "# img-colv", то изображение "# img-col" должно быть скрыто.

Я пробовал использовать дочерний селектор > и {visibility: hidden}, но он не работает.

Заранее благодарю за добрый совет.

Каким должно быть состояние по умолчанию для обоих изображений?

— 02.05.2018 19:33

@GautamNaik: если я понимаю ваш вопрос, состояние обоих изображений по умолчанию отображается с height:4% для каждого, как на экране печати в моем сообщении.

— 02.05.2018 19:48

@ A.Meshu: спасибо за полезную ссылку, однако, я попробовал #img-col:hover ~ #img-colv{visibility: hidden}, следуя объяснению, но он не работает. Что я сделал не так?

— 02.05.2018 20:38

html css

02.05.2018 19:23

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

$(document).ready(function(){
    $("#img-col").hover(function(){
        $("#img-colv").css("visibility", "hidden");
        }, function(){
        $("#img-colv").css("visibility", "visible");
    });
});
$(document).ready(function(){
    $("#img-colv").hover(function(){
        $("#img-col").css("visibility", "hidden");
        }, function(){
        $("#img-col").css("visibility", "visible");
    });
});

 #img-col {height: 4%; width: 4%; border: 3px solid #fff; border-radius: 8px;  margin:  2px 5px -14px;  -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
  #img-colv {height: 4%; width: 4%; border: 2px solid orange; border-radius: 8px;  margin:  4px 0px -12px 8px; /* For Safari 3.1 to 6.0 */ transition: width 1s;}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id = "img-col-block">
  <a target = "_blank" href = "{id(substring(@facs, 2))/graphic[@n='1']/@url}" id = "{id(substring(@facs, 2))/graphic[@n='1']/@url}">
   <img src = "{id(substring(@facs, 2))/graphic[@n='1']/@url}" id = "img-col"/>
  </a>
  <a target = "_blank" href = "{id(substring(@facs, 2))/graphic[@n='2']/@url}" id = "{id(substring(@facs, 2))/graphic[@n='2']/@url}">
   <img src = "{id(substring(@facs, 2))/graphic[@n='2']/@url}" id = "img-colv"/>
  </a>
 </div>

Это пример, это jquery, который вы должны отредактировать.

02.05.2018 20:41