【发布时间】：2017-08-14 06:19:23
【问题描述】：
我已经挣扎了 90 分钟来解决这个问题，请帮助我 我使用引导程序创建行和列。图像和文本对都在单独的列中。图像在 col-sm-1 中，文本在图像列旁边的 col-sm-3 中。 以下是原代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>top categories</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<style>
img{
border-radius:50%;
width:90px;
height:90px;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
img:hover{
box-shadow: 0px 0px 20px green;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.2);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.2);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.2);
transition: all 200ms ease-in;
transform: scale(1.2);
}
}
.container-fluid{
width:1349px;
height:401px;
border:1px solid black;
}
.row{
height:100px;
}
h1:hover {
text-shadow:2px 2px 2px #aaa;
}
h3:hover{
text-shadow:2px 2px 2px ;
border:1px 1px grey;
color:lightblue;
}
</style>
<body>
<!-- top categories code begins here -->
<div class="container-fluid">
<div class="row">
<h1 class="col-md-4"></h1>
<h1 class="col-md-4">TOP CATEGORIES</h1>
<h1 class="col-md-4"></h1>
</div>
<div class="row">
<div class="col-md-1" ></div>
<div class="col-md-1 " >
<img src="General Surgery.png">
</div>
<div class="col-md-3 " >
<h3>GENERAL SURGERY</h3>
</div>
<div class="col-md-2" ></div>
<div class="col-md-1"><img src="pregnancy.png"></div>
<div class="col-md-3" ><h3>GYNACOLOGY</h3> </div>
<div class="col-md-1"></div>
</div>
<div class="row">
<div class="col-sm-1" ></div>
<div class="col-sm-1"><img src="medicine.png"></div>
<div class="col-sm-3" ><h3>MEDICINE</h3></div>
<div class="col-sm-2" ></div>
<div class="col-sm-1" ><img src="Psychitary.png"></div>
<div class="col-sm-3" ><h3>PHSYCHAIRTRY</h3></div>
<div class="col-sm-1" ></div>
</div>
<div class="row">
<div class="col-sm-1" ></div>
<div class="col-sm-1"><img src="Paediatrics.png"></div>
<div class="col-sm-3" ><h3>PEDIATRICS</h3></div>
<div class="col-sm-2" ></div>
<div class="col-sm-1" ><img src="grid1.jpg"></div>
<div class="col-sm-3" ><h3>OTHERS</h3></div>
<div class="col-sm-1" ></div>
</div>
</div>
</body>
</html>
当前样式是 我将鼠标悬停在图像上，它会缩放。 我将鼠标悬停在文本上，文本阴影更改。 我需要什么 将鼠标悬停在图像上：图像比例和相邻列中的文本显示阴影。反之亦然 我尝试了什么 test1：向图像和文本添加了公共 div。但结果是悬停图像边框属性被应用于整个 div（我不想要）。 trial2：引用堆栈溢出链接关于将鼠标悬停在div上以更改该div内的所有元素。将公共类添加到img和h3。然后使用
<div class="col-md-3 block1" >
<div class="col-md-1" ></div>
<style>
.block1:hover h3{
text-shadow:2px 2px 2px #aaa;
}
.block1:hover img{
box-shadow: 0px 0px 20px green;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.2);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.2);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.2);
transition: all 200ms ease-in;
transform: scale(1.2);
}
</style>
【问题讨论】：
-
你的css看起来不错，css的html是什么？
-
代码没问题，但是img悬停和文本悬停必须同时发生
-
你不能用 CSS 做到这一点，因为你不能设置 image 和 h3 之间的关系。它们嵌套在 2 个不同的 div 中。您将需要 Javascript 或 JQ 或其他东西才能做到这一点。如果您将它们设置在同一个容器中。然后在悬停
container(.container:hover h3 { styles }) 时在img和h3上应用:hover样式，它可能会起作用
标签： html twitter-bootstrap css