14

次の形で 1 つのタグ 形成する必要があります。div

ここに画像の説明を入力

クロスブラウザにすることはできますか?必ずしも丸みを帯びた角が必要なわけではありません。divホバー時に全体の境界線の色を変更できるようにする必要があるため、 2つdivの s を使用しても実現できないと思います。

4

10 に答える 10

12

ええ、次のように HTML と CSS を使用してそれを行うことができます: http://jsfiddle.net/broofa/364Eq/

基本的に、次のように 3 つの div を使用してマウス イベントを集約しています。

<div id="outer">
  <div class="inner"></div>
  <div class="inner"></div>
</div>

そして、外側の要素に :hover ルールを使用して、内側の div の境界線の色に影響を与えます。

#outer .inner {border-color: red}
#outer:hover .inner {border-color: blue}

このマークアップの唯一の癖は、コンテンツ領域 (画像に描画した領域) が 1 つではなく 2 つの div であることです。そのため、テキストは期待どおりに折り返されず、流れません。また、これは古い (IE6-7) ブラウザーではうまく機能しない場合があります。しかし、FF、Chrome、Safari、Opera はおそらく問題ないはずです。

于 2011-06-22T17:46:23.963 に答える
2

このjsFiddle の例を参照してください。

<div id="main">    
    <div id="div1" class="border">
        &nbsp;
    </div>
    <div id="div2" class="border">
        &nbsp;
    </div>
</div>
于 2011-06-22T17:55:56.723 に答える
1

マップを使用するか、2 つの div を使用して境界線を変更して、1 つの形状に見えるようにすることができます。

于 2011-06-22T17:39:48.860 に答える
1

私が考えることができる2つのオプション:

1) div に背景画像を指定し、CSS 疑似クラス :hover を使用して、背景画像をホバー状態を示すものに変更します

2) ラッパー内に 3 つの div を配置し、1 つが左上隅に配置され、次に 2 つが互いの上に積み重ねられるように配置します。これにより、左上がない大きな div の上半分をシミュレートできます。ハーフボーダー。境界線を変更するために CSS だけですべての div をターゲットにできるとは思わないため、3 つの div すべてにイベント ハンドラーを適用して、JS を使用してホバー動作を実行する必要があるでしょう。

于 2011-06-22T17:42:48.067 に答える
1

背景画像を使用しない限り、確実に 2 つまたは 3 つの div が必要です

これが3divのソリューションです

http://jsfiddle.net/pxfunc/SUuF6/

クロスブラウザ対応。ホバーは IE6 では機能しませんが、IE7+ では機能します。丸みを帯びた角は、ブラウザのサポートに基づいて表示されます

HTML:

<div id="fancyShape">
    <div id="main">&lt;div&gt;</div>
    <div id="panHandle"></div>
</div>

CSS:

#fancyShape {position:relative;width:504px;height:304px;}

#main {
    margin-left:100px;
    width:400px;
    height:300px;
    border:solid 2px #000;
    border-radius:0 15px 15px 15px;

}
#panHandle {
    width:100px;
    height:120px;
    position:absolute;
    top:0;left:0;
    border-top:solid 2px #000;
    border-left:solid 2px #000;
    border-bottom:solid 2px #000;
    border-radius:15px 0 0 15px;
}

/* hover effect */
#fancyShape div {background-color:#fff;}
#fancyShape:hover div {background-color:#ff0;border-color:red;}
于 2011-06-22T18:37:24.083 に答える
1

いいえ。Div は常に長方形です。さまざまな方法で偽装できます (背景画像を使用するのも 1 つのオプションです)。

2 つの DIV を使用することに関しては、確かに可能です。ホバーは、CSS3 と親 div の子セレクターを使用して実行できます。または、JavaScript を使用して、いずれかの div にホバーしたときに両方の div のクラスを変更することもできます。

于 2011-06-22T17:49:48.217 に答える
0

他の人が示唆しているように、複数の div を使用してください。

http://jsfiddle.net/thomas4g/7B5MA/14/

これでコンテンツを流すのは非常に難しいことに注意してください。

于 2011-06-22T17:53:07.860 に答える
0
 <!DOCTYPE HTML>
 <html>
 <head>

 <style>
 html{height: 100%; width: 100%;}
 body{height: 100%; width: 100%;}

 #wrapper{
 position: relative;
 top: 50px;
 right: 25%;
 width: 565px;
 height: 440px;
 margin: 0 auto;
 padding: 0px;
 }
 #left{
 position: absolute;
 width: 100px;
 height: 50px;
 border: 2px solid black;
 border-right: none;
 -moz-border-radius-bottomleft: 10px; 
 border-bottom-left-radius: 10px;
 -moz-border-radius-topleft: 10px;
 border-top-left-radius: 10px;
 background-color: #ffffff;
 }
 #right{
 position: absolute;
 left: 100px;
 width: 440px;
 height: 440px;
 border: 2px solid black;
 -moz-border-radius: 10px;
 -moz-border-radius-topleft: 0px;
 border-top-left-radius: 0px;
 border-radius: 10px;
 padding-left: 25px;
 }
 </style>


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">    </script>
 <script type="text/javascript">
  $(document).ready(function(){
  $('#wrapper').hover(
   function () {
  $(this).children('#left').css({'border':'2px solid red', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid red'});
  }, 
  function () {
  $(this).children('#left').css({'border':'2px solid black', 'border-right':'none'});
  $(this).children('#right').css({'border':'2px solid black'});
 });
 });
 </script>

 </head>
 <body>

 <div id="wrapper">
 <div id="right">Some content here</div>
 <div id = "left"></div>
 </div>

 </body>
 </html>

IE の丸められた orners に CSSPIE を使用できます。

于 2011-06-22T18:20:08.060 に答える
0

おそらく、2 つまたは 3 つの div と共にBorder-radiusを使用して、必要な外観を得ることができます。唯一の問題は、すべてのブラウザーでサポートされていないことです。

于 2011-06-22T17:43:26.723 に答える
0

疑似要素を使用した 1 div ソリューション:

/* relevant styles for shape */
.tab {
  border-top-left-radius: 0px;
  margin-left: 100px;
}

.tab:before {
  content:"";
  display: block;
  position: relative;
  height: 50px;
  width: 50px;
  right: 52px; /* width + border width */
  top: -2px;
  background-color: white;
  border: inherit;
  border-right-width: 0px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* styles to look like example */
div{
  box-sizing: border-box;
  background-color: white;
  border: 2px solid red;
  height: 100px;
  width: 200px;
  border-radius: 5px;
}

div:hover {
  border-color: green;
}
<div class="tab"></div>

于 2015-12-13T19:07:46.090 に答える