Есть ли способ навести курсор на один элемент и повлиять на другой элемент?

Я хочу, чтобы это было так просто, но я знаю, что это не так:

img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

img:hover {
  #thisElement {
    opacity: 0.3;
    filter: alpha(opacity=30);
  }
  opacity:1;
  filter:alpha(opacity=100);
}

Поэтому, когда вы наводите курсор на img, он изменяет непрозрачность #thisElement на 30% и изменяет непрозрачность изображения на 100%. Есть ли способ сделать это, используя только css?

Итак, это HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" /> 
<title>Briefcase</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
</head> 

<body> 

<div class="mask"></div>
<div class="float">
  <div id="album1">Album Title</div>
  <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />

  <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />

  <img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>

<div class="gradientTop"></div>
<div class="gradientBottom"></div>


</body> 
</html>

А это CSS:

body {
  font: normal small/3em helvetica, sans-serif;
  text-align: left;
  letter-spacing: 2px;
  font-size: 16px;
  margin: 0;
  padding: 0;
}

div.gradientTop {
  position: absolute;
  margin-top: 5px;
  z-index: 2;
  width: 206px;
  height: 30px;
  float: left;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}

div.gradientBottom {
  position: absolute;
  margin-bottom: 5px;
  z-index: 2;
  width: 206px;
  height: 120px;
  float: left;
  bottom: -210px;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}

div.float {
  border-right: 1px solid orange;
  position: absolute;
  z-index: 2;
  margin-left: 5px;
  margin-top: 5px;
  float: left;
  width: 200px;
}

div.mask {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  float: left;
  width: 206px;
  height: 805px;
  background-color: white;
}

img.left {
  z-index: inherit;
  margin-bottom: 3px;
  float: left;
  width: 200px;
  min-height: 200px;
  /* for modern browsers */
  height: auto !important;
  /* for modern browsers */
  height: 200px;
  /* for IE5.x and IE6 */
  opacity: 0.4;
  filter: alpha(opacity=40)
}

img.left:hover + #album1 {
  opacity: .4;
}

img.left:hover {
  opacity: 1.0;
}

#album1 {
  z-index: 2;
  width: 200px;
  color: white;
  text-align: center;
  position: absolute;
  background: orange;
  top: 70px;
}

image css opacity hover
person Marlon    schedule 29.07.2011    source источник
comment
связанные: stackoverflow. ком/вопросы/1462360/   -  person Ciro Santilli 新疆再教育营六四事件ۍ    schedule 23.07.2014

Ответы (2)


arrow_upward
63
arrow_downward

Единственный способ сделать это с помощью CSS — если элемент, на который нужно воздействовать, является либо потомком, либо соседним братом.

В случае потомка:

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

Что будет применяться к таким элементам, как:

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

Для соседних братьев и сестер:

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

Что работает для разметки, такой как:

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

В обоих случаях выбирается последний элемент селектора.

Учитывая ваш пример псевдокода, вы, вероятно, хотите что-то вроде:

img:hover + img {
    opacity: 0.3;
    color: red;
}

демонстрация JS Fiddle.

person David says reinstate Monica    schedule 29.07.2011
comment
Я пробовал так: img.left:hover + #album1{ opacity:.4; } img.left: hover { непрозрачность: 1,0; } Принимая во внимание, что #album1 — это элемент div, показанный над элементом img. Это не дало должного эффекта и продолжало функционировать в прежнем режиме. Что вы порекомендуете? - person Marlon; 29.07.2011
comment
Я настоятельно рекомендую отредактировать ваш вопрос (нажмите ссылку «Изменить») и добавить к вашему вопросу html-разметку соответствующих частей вашей страницы. Так я смогу увидеть, в чем могут быть проблемы. Стоит отметить, что + (селектор соседнего элемента) может работать только для выбора элемента (#second_sibling), который появляется в разметке после #first_sibling. - person David says reinstate Monica; 29.07.2011
comment
Отредактировано. И с соответствующим кодом (всем, потому что я только что создал для него отдельный документ). Работал как шарм, когда я изменил порядок... у вас есть решение проблемы с позиционированием? Div id=album1 должен быть вертикально центрирован на своем брате... и я сделал это вручную... но это нужно сделать для всех из них. - person Marlon; 29.07.2011
comment
В событии наведения CSS, могу ли я изменить стиль другого элемента div? Также показывает общий селектор родственного элемента. - person 1934286; 21.02.2014
comment
Используя flexbox, вы можете наводить курсор на другие элементы, даже если они (кажутся) размещены перед находящимся в DOM. См. мой виджет оценки чистого CSS< /а>. - person Dan Dascalescu; 09.09.2015

arrow_upward
6
arrow_downward

Я знаю, что вы, вероятно, ищете способ делать то, что хотите, на чистом css, но я бы посоветовал вам использовать HTML+CSS+JS как замечательную структуру MVC, которой они и являются.

  • HTML — это ваша Модель, содержащая ваши данные
  • CSS — это ваше представление, определяющее, как должна выглядеть страница.
  • JS — это ваш контроллер, контролирующий взаимодействие модели и представления.

Здесь следует воспользоваться аспектом контроля. Вы хотите управлять представлением элемента при взаимодействии с пользователем. Это именно то, для чего предназначен JS.

С очень минимальным JavaScript вы можете включать и выключать класс #thisElement при наведении курсора на img. Это, безусловно, лучше, чем играть в игры с селектором CSS, хотя я бы понял, если вы готовы принять ответ только на чистом CSS.

person zzzzBov    schedule 29.07.2011
comment
Нет, я согласен с вами, что js, вероятно, был бы лучше в этом случае, но единственная проблема... я не знаю js. Сейчас я изучаю jquery и хочу через несколько дней продемонстрировать рабочую страницу некоторым инвесторам. - person Marlon; 29.07.2011
comment
Структура MVC для этого излишня и не по теме :) - person Dan Dascalescu; 09.09.2015