**已关闭。**此问题需要debugging details。当前不接受答案。
编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
17小时前关闭
Improve this question
我的:hover links有问题。主链接（id="big-box-content-topmain-mainew-link"）对我来说很好。但是侧链接（class="big-box-content-topmain-otherlist-link"）即使以同样的方式完成也根本不起作用。我想在链接内的所有元素中的所有文本下划线。我如何解决这个问题？
我的代码：
#big-box-content-topmain {
width: 100%;
height: 500px;
box-sizing: border-box;
}
#big-box-content-topmain-mainew {
height: 100%;
width: 520px;
box-sizing: border-box;
padding-right: 20px;
border-right: 1px lightgray solid;
float: left;
}
#big-box-content-topmain-mainew-link {
color: #102447;
text-decoration: none
}
#big-box-content-topmain-mainew-link:hover {
text-decoration: underline;
}
#big-box-content-topmain-mainew-link:visited {
color: #102447;
}
#big-box-content-topmain-mainew-imgbox {
height: 300px;
width: 500px;
box-sizing: border-box;
border: lightgray 1px solid;
}
#big-box-content-topmain-mainew-imgbox-img {
height: 100%;
width: 100%;
}
#big-box-content-topmain-mainew-infoimgbox {
width: 100%;
height: 20px;
box-sizing: border-box;
padding: 0px 10px;
background: rgb(239, 243, 255);
background: linear-gradient(180deg, rgba(239, 243, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#big-box-content-topmain-mainew-infoimgbox-autorpart {
height: 100%;
width: 50%;
box-sizing: border-box;
color: lightgray;
float: left;
}
#big-box-content-topmain-mainew-infoimgbox-autorpart-icon {
height: 100%;
width: 20px;
box-sizing: border-box;
float: left;
padding: 2px;
}
#big-box-content-topmain-mainew-infoimgbox-autorpart-autorname {
height: 100%;
width: auto;
box-sizing: border-box;
float: left;
padding: 2px 5px;
color: gray;
font-size: 12px;
}
#big-box-content-topmain-mainew-infoimgbox-timepart {
height: 100%;
width: 50%;
box-sizing: border-box;
color: lightgray;
float: left;
}
#big-box-content-topmain-mainew-infoimgbox-timepart-time {
height: 100%;
width: auto;
box-sizing: border-box;
float: right;
padding: 2px 5px;
color: gray;
font-size: 12px;
}
#big-box-content-topmain-mainew-headerbox {
width: 100%;
height: auto;
min-height: 29px;
max-height: 58px;
box-sizing: border-box;
padding: 0px 10px;
overflow: hidden;
}
#big-box-content-topmain-mainew-headerbox-header {}
.big-box-content-topmain-mainew-headerbox-header {
margin: 0;
line-height: 1.2;
font-size: 24px;
}
#big-box-content-topmain-mainew-textbox {
width: 100%;
height: auto;
max-height: 122px;
box-sizing: border-box;
padding: 15px 10px;
overflow: hidden;
}
#big-box-content-topmain-mainew-textbox-text {}
.big-box-content-topmain-mainew-textbox-text {
margin: 0;
line-height: 1.5;
font-size: 13px;
}
#big-box-content-topmain-otherlist {
height: 100%;
width: 440px;
box-sizing: border-box;
padding-left: 20px;
float: left;
}
.big-box-content-topmain-otherlist-link {
color: #102447;
}
.big-box-content-topmain-otherlist-link:visited {
color: #102447;
}
.big-box-content-topmain-otherlist-link:hover {
text-decoration: underline;
}
.big-box-content-topmain-otherlist-zprava {
width: 100%;
height: 100px;
box-sizing: border-box;
padding: 10px 0px;
}
.big-box-content-topmain-otherlist-zprava-imgbox {
height: 100%;
width: 133px;
float: left;
}
.big-box-content-topmain-otherlist-zprava-imgbox-img {
height: 100%;
width: 100%;
}
.big-box-content-topmain-otherlist-zprava-textbox {
height: 100%;
width: calc(100% - 133px);
float: left;
padding: 0px 10px;
box-sizing: border-box;
}
.big-box-content-topmain-otherlist-zprava-textbox-text {
line-height: 1.2;
margin: 0;
font-size: 16px;
}<body>
<div id="big-box-content-topmain">
<div id="big-box-content-topmain-mainew">
<a id="big-box-content-topmain-mainew-link" href="">
<div id="big-box-content-topmain-mainew-imgbox"><img id="big-box-content-topmain-mainew-imgbox-img" src=""></div>
<div id="big-box-content-topmain-mainew-infoimgbox">
<div id="big-box-content-topmain-mainew-infoimgbox-autorpart">
<div id="big-box-content-topmain-mainew-infoimgbox-autorpart-icon"><img src="" height="100%" width="100%"></div>
<div id="big-box-content-topmain-mainew-infoimgbox-autorpart-autorname"><span id="big-box-content-topmain-mainew-infoimgbox-autorpart-autorname-text">Example.com</span>
</div>
</div>
<div id="big-box-content-topmain-mainew-infoimgbox-timepart">
<div id="big-box-content-topmain-mainew-infoimgbox-timepart-time">13:30</div>
</div>
</div>
<div id="big-box-content-topmain-mainew-headerbox">
<h2 id="big-box-content-topmain-mainew-headerbox-header" class="big-box-content-topmain-mainew-headerbox-header">This is header of the main link</h2>
</div>
</a>
<div id="big-box-content-topmain-mainew-textbox">
<p id="big-box-content-topmain-mainew-textbox-text" class="big-box-content-topmain-mainew-textbox-text">
And, this is description of the main link.</p>
</div>
</div>
<div id="big-box-content-topmain-otherlist">
<a href="" class="big-box-content-topmain-otherlist-link">
<div class="big-box-content-topmain-otherlist-zprava">
<div class="big-box-content-topmain-otherlist-zprava-imgbox"><img src="" class="big-box-content-topmain-otherlist-zprava-imgbox-img"></div>
<div class="big-box-content-topmain-otherlist-zprava-textbox">
<h4 class="big-box-content-topmain-otherlist-zprava-textbox-text">This is text of the link.</h4>
</div>
</div>
</a>
<a href="" class="big-box-content-topmain-otherlist-link">
<div class="big-box-content-topmain-otherlist-zprava">
<div class="big-box-content-topmain-otherlist-zprava-imgbox"><img src="" class="big-box-content-topmain-otherlist-zprava-imgbox-img"></div>
<div class="big-box-content-topmain-otherlist-zprava-textbox">
<h4 class="big-box-content-topmain-otherlist-zprava-textbox-text">This is text of the link.</h4>
</div>
</div>
</a>
<a href="" class="big-box-content-topmain-otherlist-link">
<div class="big-box-content-topmain-otherlist-zprava">
<div class="big-box-content-topmain-otherlist-zprava-imgbox"><img src="" class="big-box-content-topmain-otherlist-zprava-imgbox-img"></div>
<div class="big-box-content-topmain-otherlist-zprava-textbox">
<h4 class="big-box-content-topmain-otherlist-zprava-textbox-text">This is text of the link.</h4>
</div>
</div>
</a>
<a href="" class="big-box-content-topmain-otherlist-link">
<div class="big-box-content-topmain-otherlist-zprava">
<div class="big-box-content-topmain-otherlist-zprava-imgbox"><img src="" class="big-box-content-topmain-otherlist-zprava-imgbox-img"></div>
<div class="big-box-content-topmain-otherlist-zprava-textbox">
<h4 class="big-box-content-topmain-otherlist-zprava-textbox-text">This is text of the link.</h4>
</div>
</div>
</a>
<a href="" class="big-box-content-topmain-otherlist-link">
<div class="big-box-content-topmain-otherlist-zprava">
<div class="big-box-content-topmain-otherlist-zprava-imgbox"><img src="" class="big-box-content-topmain-otherlist-zprava-imgbox-img"></div>
<div class="big-box-content-topmain-otherlist-zprava-textbox">
<h4 class="big-box-content-topmain-otherlist-zprava-textbox-text">This is text of the link.</h4>
</div>
</div>
</a>
</div>
</div>
</body>我寻找答案，但到处都找不到。
1条答案
按热度按时间k3fezbri1#
好吧。如果我明白你想问的是：
当用户
:hovers时，您希望div.big-box-content-topmain-otherlist-link中的文本带有下划线。这可以通过以下方式实现：
.big-box-content-topmain-otherlist-link:hover h4{text-decoration: underline}直接瞄准目标H4。您还可以执行以下操作：：
.big-box-content-topmain-otherlist-link h4:hover{text-decoration: underline}仅当用户将鼠标悬停在H4元素上时才定位该元素。下面是你的代码与变化。
作为旁注，考虑更通用和更短的类名以提高可读性。