0
私はこれを解決するために90分苦労しています 私は行と列を作成するためにブートストラップを使用しました。画像とテキストのペアは両方とも別々のcolumns.imageにあります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>
現在のスタイルは、私が画像上にホバー で元のコードで、それがスケール。 私はテキスト上にカーソルを置いて、テキストシャドーを変更します。隣接する列の画像スケール及びテキストshadow.orの逆に私が TEST1を試みたもの を示す：iが画像上にホバーに が必要なもの 両方の画像に共通のDIVを添加し、その結果をtext.butでありますホバリング画像の境界線のプロパティがdiv全体に適用されています（これは嫌いです）。 trial2：その内のすべての要素を変更するにはdiv要素にホバーについて、スタックオーバーフローのリンクをrefferedがはこれを試して
<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がありますか？ – cloned
コードは問題ありませんが、imgホバーとテキストホバーが同時に発生する必要があります – vineeth
イメージとh3の関係を設定できないため、CSSでこれを行うことはできません。それらは2つの異なるdivに入れ子になっています。 JavascriptやJQなどが必要です。 同じコンテナにそれらを設定した場合。 ''コンテナ '（' .container：hover h3 {styles} '）をホバリングするときに'：hover'スタイルを 'img'と' h3'に適用すると、動作するかもしれません –