如何将包含内容的<section>转换为在悬停时更改颜色的链接

时间：2016-06-12 00:41:19

标签： html css html5

我有六个<sections>，它们都是flexbox包装器中的所有行。 Flex-direction设置为列。每个<section>（行）都有3个<spans>，一个<img>，一个<i>和一个<time>元素，这些元素在每个<section>内对齐使用位置相对/绝对，使用距<section>元素边缘的距离。我想整个<section>一个链接，以便当用户将鼠标悬停在它上面时，背景颜色会发生变化。

最好的方法是什么？我曾考虑将该部分设为<a>元素并将其显示为块，但我不确定这是否可行。

<section class="conversations-history-section">
     <span class="conversations-history-section-row-selected"></span>
     <img class="conversations-history-section-row-image"     src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
      <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
      <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>

.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}

.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}

.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}

.conversations-history-section-row-user {
  display: block;
  position: relative;
  max-width: 50%;
  top: 20px;
  left: 90px;
}

.conversations-history-section-row-image {
  display: block;
  position: absolute;
  left: 29px;
  top: 20px;
  border-radius: 50%;
  height: 46px;
  width: 46px;
}

.conversations-history-section-row-status {
  position: absolute;
  display: block;
  top: 8px;
  left: 0px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.conversations-history-section-row-status.online {
  background-color: $e1-conversations-history-section-status-online;
}

.conversations-history-section-row-status.offline {
  background-color: $e1-conversations-history-section-status-offline;
}

.conversations-history-section-row-name {
  position: absolute;
  display: block;
  top: 0px;
  left: 16px;
  color: $e1-conversations-history-section-user-name;
  font-weight: bold;
  font-size: 13px;
}

.conversations-history-section-row-name.active {
  color: $e1-conversations-history-section-user-name-active;
}

.conversations-history-section-row-location {
  position: absolute;
  display: block;
  top: 20px;
  left: 16px;
  font-size: 11px;
}

.conversations-history-section-row-date {
  position: absolute;
  top: 20px;
  right: 24px;
}

.conversations-history-section-row-message {
  display: block;
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: $e1-conversations-history-section-row-message;
  font-size: 16px;
}

.conversations-history-section-row-message.error {
  color: $e1-conversations-history-section-row-message-error;
}

.conversations-history-section-row-snippet {
  display: block;
  position: absolute;
  width: 350px;
  left: 24px;
  bottom: 24px;
}

4 个答案:

答案 0 :(得分：2)

您必须将section包裹在a中，并且最有可能使a成为块级元素。

＆＃13;
＆＃13; 
a {
  /* optional */
  display: block
}
a:hover {
  background: red
}
.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}
.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}
.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}
＆＃13; 
<a href="#">
  <section class="conversations-history-section">
    <span class="conversations-history-section-row-selected"></span>
    <img class="conversations-history-section-row-image" src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
    <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
    <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </section>
</a>
＆＃13;
＆＃13;
＆＃13;

如果您不想将section链接到任何地方，那么您可以：在不添加额外HTML的情况下悬停section。

＆＃13;
＆＃13; 
section:hover {
  background: red
}
.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}
.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}
.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}
＆＃13; 
<section class="conversations-history-section">
    <span class="conversations-history-section-row-selected"></span>
    <img class="conversations-history-section-row-image" src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
    <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
    <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
  </section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

是的，这是一个有效的解决方案，可以将您的部分转换为<a>并使其成为一个块：

.container a {
    display: block;
}

答案 2 :(得分：1)

跟进Matthieu Schaeffer的回答，我已经完成了类似的事情（用简单的HTML而不是更通用的XML，但它的工作方式应该相同）。

a.conversations-history-section {
  display: block;
  background-color: green:
}
.conversations-history-section:hover {
  background-color: blue:
}

当您将鼠标悬停在该部分上时，背景应该从绿色变为蓝色，或者您想要的任何颜色。

只需提出一条警告：说明您的架构允许将所有这些元素（例如<time>）放入<a>元素中。如果您的XML与您的架构不匹配，浏览器可能会做一些奇怪的事情。我建议使用XML验证器（在线或可下载）。

注意：我的代码不遵守XHTML架构，例如<p>内的块级元素<ul>和<a>。它的工作方式如图所示，但是当我尝试在其中一个段落中放置第二级<a>时，只有部分文本具有正确的背景。

这是基于＆＃34;鲑鱼书＆＃34 ;:来自O＆＃39; Reilly的层叠样式表，第53页（章节标题＆＃34;伪类选择器＆＃34;，小节＆＃34;动态伪类＆＃34;）

以下是我用来测试此代码的代码：

<html>
<head>
<title>title</title>
<style type="text/css">
a.section {
    display: block;
    background-color: #8f8;
    text-decoration: none;
    color: black;
}
.section:hover {
    background-color: #88f;
}
a.section a {
    text-decoration: underline;
    color: red;
    display: inline;
}
a.section a:visited {
    display: inline;
    color: silver;
}
</style>
</head>
<body>
<div class="all">
<a href="#" class="section">
<p>This is the first paragraph<br/>
And a second line.
</p>
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
<li>xyz</li>
</ul>
<p>This is the second paragraph
</p>
</a>
</div>
</body>
</html>

答案 3 :(得分：0)

如果我理解你的问题，你真正需要的是：

section:hover{background-color:wheat;}

jsFiddle Demo

＆＃13;
＆＃13; 
section:hover{background-color:wheat;}

.conversations-history-section {
  position: relative;
  min-height: 140px;
  max-height: 140px;
  width: 400px;
  color: $e1-conversations-history-section-text;
  font-size: 13px;
  border-bottom: 1px solid $e1-body-1px-line;
}

.conversations-history-section-row-selected {
  position: absolute;
  display: block;
  width: 5px;
  height: 140px;
  left: 0px;
  background-color: $e1-conversations-history-section-selected;
}

.conversations-history-section-row-selected.not {
  background-color: $e1-conversations-history-wrapper-bg;
}

.conversations-history-section-row-user {
  display: block;
  position: relative;
  max-width: 50%;
  top: 20px;
  left: 90px;
}

.conversations-history-section-row-image {
  display: block;
  position: absolute;
  left: 29px;
  top: 20px;
  border-radius: 50%;
  height: 46px;
  width: 46px;
}

.conversations-history-section-row-status {
  position: absolute;
  display: block;
  top: 8px;
  left: 0px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.conversations-history-section-row-status.online {
  background-color: $e1-conversations-history-section-status-online;
}

.conversations-history-section-row-status.offline {
  background-color: $e1-conversations-history-section-status-offline;
}

.conversations-history-section-row-name {
  position: absolute;
  display: block;
  top: 0px;
  left: 16px;
  color: $e1-conversations-history-section-user-name;
  font-weight: bold;
  font-size: 13px;
}

.conversations-history-section-row-name.active {
  color: $e1-conversations-history-section-user-name-active;
}

.conversations-history-section-row-location {
  position: absolute;
  display: block;
  top: 20px;
  left: 16px;
  font-size: 11px;
}

.conversations-history-section-row-date {
  position: absolute;
  top: 20px;
  right: 24px;
}

.conversations-history-section-row-message {
  display: block;
  position: absolute;
  right: 24px;
  bottom: 24px;
  color: $e1-conversations-history-section-row-message;
  font-size: 16px;
}

.conversations-history-section-row-message.error {
  color: $e1-conversations-history-section-row-message-error;
}

.conversations-history-section-row-snippet {
  display: block;
  position: absolute;
  width: 350px;
  left: 24px;
  bottom: 24px;
}
＆＃13; 
<section class="conversations-history-section">
     <span class="conversations-history-section-row-selected"></span>
     <img class="conversations-history-section-row-image"     src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
      <span class="conversations-history-section-row-name active">Michael Buble</span>
      <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">7:59 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">I really enjoyed those singing contests at the PNE every summer..</span>
</section>
<section class="conversations-history-section">
     <span class="conversations-history-section-row-selected"></span>
     <img class="conversations-history-section-row-image"     src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
      <span class="conversations-history-section-row-name active">Michael J Fox</span>
      <span class="conversations-history-section-row-location">Burnaby, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:08 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Christopher Lloyd was better on Taxi, but I sure had great times at Burnaby Central...</span>
</section>
<section class="conversations-history-section">
     <span class="conversations-history-section-row-selected"></span>
     <img class="conversations-history-section-row-image"     src="assets/images/profileimg1.png" alt="img">
    <span class="conversations-history-section-row-user">
      <span class="conversations-history-section-row-status online"></span>
      <span class="conversations-history-section-row-name active">Lucile B. Nash</span>
      <span class="conversations-history-section-row-location">Vancouver, BC</span>
    </span>
    <time class="conversations-history-section-row-date">8:48 AM</time>
    <i class="fa fa-e1-message-success conversations-history-section-row-message">   </i>
    <span class="conversations-history-section-row-snippet">Hey, it was really good to see you over the weekend, I look forward to...</span>
</section>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题