Проблемы с получением правильного селектора CSS

Question

У меня проблемы с выбором правильного селектора.

Позвольте мне попытаться объяснить, как я могу:

Я работаю над проектом, который не может изменить HTML и Javascript., он имеет некоторый динамический HTML и другие причины.

В проекте есть изображение на теге <img>.

Однако мне нужно изменить цвета между двумя макетами, и какВы можете видеть на HTML / CSS единственный способ, который я получил, чтобы работать, это скрыть тег <img> и установить фон для якоря, который имеет заголовок.

Итак, теперь, когда я изменяюмакеты, изображение меняется, однако есть и что-то еще, это изображение при щелчке скрывает меню и меняет изображение еще раз.

Теперь мне нужно скрыть фон на якоре, когда заголовок наизображение меняется.

Вот HTML-код ДО того, как щелкнуть изображение

<div id="div-mh-ico">

<ul id="ul-icone-mh" class="icones">
    <li>
        <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
            <img title="Esconder menu horizontal" id="imgHideMenu" src="images/ico_hidemh.png" width="16" height="16">
        </a>
    </li>
</ul>

А вот HTML-код ПОСЛЕ ТОГО, КАК я нажимаю на изображение

<div id="div-mh-ico">

<ul id="ul-icone-mh" class="icones">
    <li>
        <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
            <img title="Exibir menu horizontal" id="imgHideMenu" src="images/ico_showmh.png" width="16" height="16">
        </a>
    </li>
</ul>

CSS

Я скрываю оригинальное изображение, использованный ON ДРУГОЙ ПЛАН

#ul-icone-mh li a img {
    visibility: hidden !important;
}

И УСТАНОВИТЕ НОВОЕ ИЗОБРАЖЕНИЕ

a[title="Esconder menu horizontal"] {
box-sizing: border-box;
background-image: url(../images/ico_hidemhc.png);
background-size: 16px;
background-repeat: no-repeat;
}

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

Есть идеи, что я могу сделать?

Answer 1

Так что, если я правильно понимаю, тогда заголовок «esconder», вы хотите скрыть изображение по умолчанию и вставить свой собственный.Иначе вы хотите показать оригинал (когда заголовок «exibir».)

Вы правильно определили, как вы нацеливаетесь на тег a, основываясь на заголовке: a[title="Esconder menu horizontal"].Затем вам нужно только исключить изображение, если оно находится внутри этого тега, а затем заменить его своим собственным изображением.Затем вам также нужно указать ему явный размер и объявить тег a, который теперь напрямую имеет фоновое изображение с некоторым размером.Например:

a[title="Esconder menu horizontal"] img { display: none; }
a[title="Esconder menu horizontal"] {
  box-sizing: border-box;
  background-image: url(../images/ico_hidemhc.png);
  background-size: 16px;
  background-repeat: no-repeat;
  height: 16px;
  width: 16px;
  display:inline-block;
}

Вы заметите, что я добавил несколько строк в ваш существующий стиль:

• display:inline-block сообщает браузеру, что этот элемент должен следовать за потоком, как встроенныйэлемент, но должен иметь семантику блочного типа.По умолчанию тег привязки является встроенным элементом, что означает, что он не имеет явного размера или ширины - только то, что обеспечивается его дочерними элементами.Поскольку вы решили, что дочерний элемент не будет виден, тег привязки фактически сворачивается до размера 0x0.
• height:16px; width:16px сообщает браузеру, какой размер изображения вы хотите.Я догадался об этих размерах, основываясь на установленном вами свойстве background-size.Поскольку мы сообщили браузеру с помощью свойства display, что этот элемент имеет явный размер, теперь мы сообщаем ему, что это за размер.

Answer 2

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

Требуется немного больше усилий и усилий.

img { height:50px; width:50px }

ul {padding: 0; list-style:none;}

.icones a::after {
  content: '';
  height:50px; width:100px;
  background-image: linear-gradient(to right, #00FF00 50%, #0000FF 50%); 
  display:inline-block;
}

.icones a {
  height:50px; width:50px;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  font-size:0;
}
.icones a img[title='Esconder menu horizontal'] {
  margin-left: -50px;
}

.icones a img[title='Exibir menu horizontal'] {
  margin-left: -100px;
}

  <div id="div-mh-ico">
    <ul id="ul-icone-mh" class="icones">
        <li>
            <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
                <img title="Esconder menu horizontal" id="imgHideMenu" src="http://placehold.it/200/ff0000" width="16" height="16">
            </a>
        </li>
    </ul>
  </div>
  <div id="div-mh-ico">
    <ul id="ul-icone-mh" class="icones">
        <li>
            <a href="#" class="mh-icon" title="Esconder menu horizontal" onclick="hideMenuHorizontal();">
                <img title="Exibir menu horizontal" id="imgHideMenu" src="http://placehold.it/200/990000" width="16" height="16">
            </a>
        </li>
    </ul>
  </div>

Здесь я увеличил изображения до 50x50px с 16x16px, чтобы их было немного легче увидеть, но принцип тот же.

Для двух изображений, на которые ссылается HTML, я использовал два блока разных оттенков красного.

Для двух наложенных изображений CSS, для простоты, я использовал линейный градиент, создавая блок, который являетсяВысота изображения и в два раза больше ширины.Левая половина - зеленая, а правая - синяя.Вы бы использовали sprite для двух изображений, которые вы хотите отобразить.Левая половина спрайта будет содержать замещающее изображение «Esconder ...», а правая половина спрайта будет содержать замещающее изображение «Exibir ...».

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

Идея состоит в том, что левый край изображения сделан отрицательным, чтобы сместить его из элемента a.Следующий псевдоэлемент содержит спрайт и смещается в это пространство либо на ширину изображения, либо на удвоенную ширину изображения, чтобы показать различное содержимое для двух случаев.

Следовательно, мы получаем зеленыйкоробка для кейса "Esconder ..." и синяя коробка для кейса "Exibir ...".

Answer 3

Не очень понятно, что вы пытаетесь выполнить, но если вы пытаетесь изменить привязку на основе изображения, это просто невозможно при использовании только CSS.

Вы можете нацеливать дочерние элементы на основе их родителей, но вы не можете нацеливать родительские элементы на основе их дочерних элементов в CSS (в настоящее время).

Единственный способ сделать это - повлиять на то, какHTML-код отображает две опции или использует Javascript.

Существует несколько различных предлагаемых спецификаций для такого селектора, но ни одна еще не была реализована.

Поскольку тег img - это то, что имеет динамический заголовок, это единственная вещь, которую вы сможете использовать в своем CSS.Если вы не можете выполнить свою задачу путем нацеливания на img, то это невозможно сделать в указанных вами ограничениях.

Селекторы: https://www.w3.org/TR/CSS2/selector.html

Поддержка предлагаемой спецификации для родительского селектора: https://caniuse.com/#feat=css-has