[英]How can a hover-over element still change other element styles when they're all in separate divs?
I understand that an element can change the style of associated elements upon hovering as long as they're within the same divs, but how can the same functionality be achieved when they're all in separate elements such as div
, section
, article
, h1
, etc. 我知道,只要元素位于同一div中,元素就可以在悬停时更改其样式,但是当它们都位于
div
, section
, article
, h1
等单独的元素中时,如何实现相同的功能等
I have set up a jsfiddle that consists of a version that works and a version that doesn't. 我已经建立了一个jsfiddle ,该jsfiddle包含一个有效的版本和一个无效的版本。 As best, I would like to find out a way to achieve this through CSS only, but if it is an issue that only javascript can solve, that'll be okay.
最好的情况是,我想找到一种仅通过CSS来实现此目标的方法,但是如果只有javascript可以解决的问题,那就可以了。
I've been looking around StackOverflow but there doesn't seem to be an answer to what to do when the elements are within separate elements. 我一直在寻找StackOverflow,但是当元素位于单独的元素中时,似乎没有答案。
HTML 的HTML
<h1>This version works fine...</h1>
... <span class="a1">fruits</span> and <span class="b1">vegetables</span>... <span class="a2">apple</span>, <span class="b2">asparagus</span>
<h1>...but how can I get this to work?</h1>
... <div class="div1"><span class="a1">fruits</span> and <span class="b1">vegetables</span></div>... <div class="div2"><span class="a2">apple</span>, <span class="b2">asparagus</span></div>
CSS 的CSS
.a1, .b1 {
border:1px solid #333333;
padding: 0 1% 0 1%;
text-align: center;
-o-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
.a2, .b2 {
border:1px solid #dddddd;
padding: 0 1% 0 1%;
text-align: center;
-o-transition: color 0.2s ease-out;
-ms-transition: color 0.2s ease-out;
-moz-transition: color 0.2s ease-out;
-webkit-transition: color 0.2s ease-out;
transition: color 0.2s ease-out;
}
.a1:hover {
border:1px solid red;
color: white;
background-color: red;
}
.b1:hover {
border:1px solid green;
color: white;
background-color: green;
}
.a1:hover ~ .a2 {
border:1px solid red;
color: white;
background-color: red;
}
.b1:hover ~ .b2 {
border:1px solid green;
color: white;
background-color: green;
}
I've found out what the problem is. 我发现了问题所在。
Go to your code, fix or take off the lines below from the problematic part 转到您的代码,修复或删除有问题的部分中的以下代码行
</div>
<div class="div2">
Two problems 两个问题
For jQuery: you can do something like 对于jQuery:您可以执行以下操作
$(".a1").hover(function () {
$(".a2, .a1").css({"color":"white", "background-color":"red"});
});
See the jQuery example here 在这里查看jQuery示例
Note: If you have the DIV's there for a reason, try the jQuery method 注意:如果有DIV,则尝试使用jQuery方法
CSS 的CSS
.a1:hover, .a2.light { /* your css */ }
.b1:hover, .b2.light { /* your css */ }
JAVASCRIPT JAVASCRIPT
var fruits = document.querySelectorAll('.div2 .a2'),
vegets = document.querySelectorAll('.div2 .b2'),
spanf = document.querySelector('.div1 .a1'),
spanv = document.querySelector('.div1 .b1');
spanf.addEventListener('mouseenter', function() {
[].forEach.call(fruits, function(el) {
el.classList.add('light');
});
});
spanf.addEventListener('mouseleave', function() {
[].forEach.call(fruits, function(el) {
el.classList.remove('light');
});
});
spanv.addEventListener('mouseenter', function() {
[].forEach.call(vegets, function(el) {
el.classList.add('light');
});
});
spanv.addEventListener('mouseleave', function() {
[].forEach.call(vegets, function(el) {
el.classList.remove('light');
});
});
NOTE Safari doesn't support mouseenter / mouseleave
. 注意 Safari不支持
mouseenter / mouseleave
。 You can use mouseover / mouseout
instead. 您可以改用
mouseover / mouseout
。
If you prefer a solution with jQUERY (it's less to write, but does the same under the hood): 如果您更喜欢使用jQUERY的解决方案(虽然编写起来少了一些,但实际上却是这样做的):
var fruits = $('.div2 .a2'),
vegets = $('.div2 .b2');
$('.div1 .a1').hover(function() {fruits.toggleClass('light');});
$('.div1 .b1').hover(function() {vegets.toggleClass('light');});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.