Question

我目前正在为我的朋友编写一个非常基本的页面，他说他想要一个根据他悬停的链接改变颜色的方框。我尝试了一些东西，但似乎都没有。

这是身体的样子：

＆＃13;

body {
  color: #fff;
  background: #98adca;
  text-align: center;
  margin: 275px auto;
}
#box {
  padding: 30px;
  border: solid;
}
li {
  list-style: none;
  text-decoration: none;
}
a,
a:hover,
a:active,
a:visited {
  color: #fff;
  text-decoration: none;
}
.twt:hover {
  background: #c3c0d1;
  color: #fff;
}

＆＃13;

<div id="box">
  <h1><a href="{BlogURL}">social media</a></h1>
  <div class="twt">
    <li><a href="#">twitter</a>
    </li>
  </div>
  <div class="ig1">
    <li><a href="#">art instagram</a>
    </li>
  </div>
  <div class="ig2">
    <li><a href="#">regular instagram</a>
    </li>
  </div>
  <div class="fb">
    <li><a href="#">facebook</a>
    </li>
  </div>
  <div class="yt">
    <li><a href="#">youtube</a>
    </li>
  </div>
</div>

＆＃13;

但是我不知道应该如何编写CSS以使盒子成为另一种颜色，例如，只是悬停在YouTube链接上。在我当前的CSS中，只有当悬停时文本的背景才会改变，而不是整个框。

Answer 1

尝试将jQuery与“onmouseover”事件一起使用：

HTML：

<div id="box">
  <a onmouseover="colorChange()" onmouseout="revert()" href="#">Link</a>
</div>

使用Javascript：

function colorChange() {
  $("#box").css("background-color", "red");
}
function revert() {
  $("#box").css("background-color", "lightgrey");
}

这是我的笔：http://codepen.io/Hudson_Taylor11/pen/ozQogO

希望这有帮助！

Answer 2

使用jQuery：

$(".twt").hover(
    function() {
        $("#box").css( "background-color", "#000" );
    },
    function() {
        $("#box").css( "background-color", "#98adca" );
    }  
);

如果您需要帮助设置jQuery，请告诉我。

Answer 3

据我所知。 CSS不会向后走。我能想到的就是使用jQuery来做到这一点。

$(document).ready(function(){
  $('.ig1 li a').hover(function(){
    $('#box').css({'background-color': 'green'});
  });
  $('.ig2 li a').hover(function(){
    $('#box').css({'background-color': 'blue'});
  });
  $('.yt li a').hover(function(){
    $('#box').css({'background-color': 'red'});
  });
  
  $('.fb li a').hover(function(){
    $('#box').css({'background-color': 'pink'});
  });
  
});

body {
            color: #fff;
            background: #98adca;
            text-align: center;
            margin: 275px auto;
            padding: 30px;
        }
      #box {
        border: 3px solid #fff;
        padding: 30px;
      }
        li {
            list-style:none;
            text-decoration:none;
        }
        a, a:hover, a:active, a:visited {
            color: #fff;
            text-decoration:none;
        }
        .twt:hover {
            background: #c3c0d1;
            color: #fff;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box">
    <h1><a href="{BlogURL}">social media</a></h1>
    <div class="twt">
        <li><a href="#">twitter</a></li>
    </div>
    <div class="ig1">
        <li><a href="#">art instagram</a></li>
    </div>
    <div class="ig2">
        <li><a href="#">regular instagram</a></li>
    </div>
    <div class="fb">
        <li><a href="#">facebook</a></li>
    </div>
    <div class="yt">
        <li><a href="#">youtube</a></li>
    </div>
</div>
</body>

Answer 4

是的，所以我开始思考，你可以用JS做到这一点，但你能用纯CSS做到吗？
简答 - 否。由于安全性和其他问题，CSS不允许子元素访问父元素。一个简单的谷歌搜索将向您展示我阅读的所有内容，这里没有分享文档的重点。

但是，如果我们欺骗用户，那么，只是听我说。

不要改变父母的颜色，这是非法的，让我们改变兄弟的颜色 - CSS允许的 <{strong> Link
HTML `

<body> <div class="box"> <h1><a href="{BlogURL}">social media</a></h1> <div class="link_divs" id="div_1"> <li><a href="#">twitter</a></li> </div> <div class="link_divs" id="div_2"> <li><a href="#">art instagram</a></li> </div> <div class="link_divs" id="div_3"> <li><a href="#">regular instagram</a></li> </div> <div class="link_divs" id="div_4"> <li><a href="#">facebook</a></li> </div> <div class="link_divs" id="div_5"> <li><a href="#">youtube</a></li> </div> <div id="pretend_div"> </div> </div> </body>

这是 CSS

body { color: #fff; background: #98adca; text-align: center; margin: 275px auto; padding: 30px; border: 3px solid #fff; height: 100%; } li { list-style:none; text-decoration:none; } a, a:hover, a:active, a:visited { color: #fff; text-decoration:none; } /* IMPORTANT - This will be the new "body" */ #pretend_div{ position: absolute; /* REQUIRED */ width: 96%; /* Matching your body size */ height: 180px; /* Matching your body size */ border: 1px solid red; /* Differentiating made easy */ top:0; /* IMPORTANT - push the element to the top */ left: 0; /* IMPORTANT - push the element to the left */ margin: 275px auto; /* Grabbed the margin from your body */ padding: 30px; /* Grabbed the padding from your body */ z-index: -1; /* IMPORTANT - push the element to the back of stack */ } /* IMPORTANT - generic link class */ .link_divs{ z-index: 0; /* IMPORTANT - set the links on-top of the pretend div */ position: relative; /* IMPORTANT - positioning */ } /* What link you hover over ~ The pretend div */ #div_1:hover ~ #pretend_div{ background-color: #00A000; /* change bck colour */ } #div_2:hover ~ #pretend_div{ background-color: orangered; } #div_3:hover ~ #pretend_div{ background-color: darkgoldenrod; }

备注我知道这不是最好的解决方案，老实说 - 只需使用JS。但我想尝试用纯CSS实现它。现在我试着尽可能地将假装div与你的身体相匹配，因此它看起来很好，不尽如人意。我添加了一些注释，以帮助您了解每行发生的情况。使用“兄弟风格”CSS的那些标记为重要。其他一切都与您的身体风格相匹配。

JSFiddle Demo - ＆gt; DEMO LINK

希望有所帮助

Answer 5

而不是背景尝试背景色

悬停在div上时如何改变体色

5 个答案: