Мне нужно сформировать тег ONE div в следующей форме:
Можно ли перевернуть браузер? Мне не обязательно нужны закругленные углы. Мне нужно это, чтобы я мог изменить цвет границ всего div при наведении, поэтому я предполагаю, что этого не может быть достигнуто с помощью двух div s.
Да, вы можете сделать это с помощью HTML и CSS следующим образом: http://jsfiddle.net/broofa/364Eq/
Он по существу использует три 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}
Единственная причуда с этой разметкой заключается в том, что область содержимого - область, на которую вы нарисовали свой образ, - это то, что это два div, а не один. Таким образом, текст не будет обертываться и протекать так, как вы ожидали. Кроме того, это может не так хорошо работать в более старых (IE6-7) браузерах. Но FF, Chrome, Safari, Opera, вероятно, будут в порядке.
Смотрите пример jsFiddle:
<div id="main">
<div id="div1" class="border">
</div>
<div id="div2" class="border">
</div>
</div>
Вы можете использовать карту или использовать 2 divs и изменять границы, чтобы они выглядели как одна форма.
два варианта, о которых я могу думать:
1) дайте div фоновое изображение и используйте псевдо-класс CSS: наведите указатель мыши на изменение фонового изображения на изображение, указывающее состояние зависания
2) поместите три div внутри обертки и расположите их так, чтобы у вас был один в верхнем левом углу, а затем два уложены друг на друга, чтобы вы могли имитировать верхнюю половину большего отсутствующего div верхняя левая половина границы. Я не думаю, что CSS alonw может настроить таргетинг на все div, чтобы изменить их границы, поэтому, вероятно, придется использовать JS для выполнения поведения наведения, применяя обработчик событий ко всем трем div.
Нет. Divs ВСЕГДА прямоугольные. Вы можете подделать его несколькими способами (одним из вариантов будет использование фонового изображения).
Как для использования двух DIV, вы могли бы это сделать. Наведение может быть выполнено с помощью CSS3 и дочерних селекторов родительского div, или вы могли бы JavaScript изменить класс обоих div при зависании над одним из них.
Определенно требуется два или три div, если вы не используете фоновое изображение
Здесь решение с тремя div
http://jsfiddle.net/pxfunc/SUuF6/
Совместим с кросс-браузером. Наведение не будет работать в IE6, но оно будет в IE7+. Округлые углы будут отображаться на основе поддержки браузера
HTML:
<div id="fancyShape">
<div id="main"><div></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;}
Возможно, вы могли бы использовать Border-radius вместе с 2 или 3 div, чтобы получить нужный вам вид. Единственная проблема в том, что она не поддерживается во всех браузерах.
Используйте несколько divs, как предложили другие.
http://jsfiddle.net/thomas4g/7B5MA/14/
Имейте в виду, что в этом будет очень сложно передать содержимое.
<!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>
Вы можете использовать CSSPIE для закругленных указателей для IE
Одно 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>