悬停在类中所有元素的效果

时间：2017-03-22 08:41:09

标签： html twitter-bootstrap css3

我一直在努力解决90分钟，请帮助我    我使用bootstrap创建行和列。图像和文本对都在单独的列中。图像位于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>

1 个答案:

答案 0 :(得分：1)

<!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);
 }


}
.container-fluid{
 width:1349px;
 height:401px;
 border:1px solid black;

}
.row{
  height:100px;
}
h1:hover {

 text-shadow:2px 2px 2px #aaa;
}


.hover-img: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);

} 

.hover-img:hover h3{
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-6 hover-img">
 <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


<div class="col-md-6 hover-img">
  <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


 </div>
 
 
 <div class="row">
<div class="col-md-6 hover-img">
 <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


<div class="col-md-6 hover-img">
  <div class="col-md-4 ">
  <img src="http://www.grammarchecksoftware.org/wp-content/uploads/2015/09/checker-man.png">
  </div>
  <div class="col-md-8">
    <h3>GENERAL SURGERY</h3>
  </div>

</div>


 </div>
 
 
 
 </body>
 </html>

尝试这个，它是半满的东西。

相关问题
最新问题