Форум

sprightly · #1 (**permalink**) 10.09.2012, 20:52

есть css код

.priceforimg{ display: inline-block;
              position:relative;	
			  				background:url(/money.png) no-repeat center left;
padding-left:20px;
border-bottom: 1px dotted #e1e1e1;
cursor: default;

			  
			  }
.priceforimg:hover::after
{ 
  content:'30x30cm=55$ 40x60cm=80$ 50x70cm=100$ 60x80cm=110$ 90x120cm=180$ ';
					color: rgb(0,0,0);
					background: rgba(255,255,255,0.8);
					font-size:13px;
					font-family: "Comic Sans MS", cursive;
					text-align:center;
					z-index:1;
					border:1px solid rgba(0,0,0,0.3);
					-moz-border-radius-bottomright:20px;
					-moz-border-radius-topleft:20px;
					-moz-border-radius-topright:20px;
					-webkit-border-bottom-right-radius:20px;
					-webkit-border-top-right-radius:20px;
					-webkit-border-top-left-radius:20px;
					position: absolute;
					bottom:0px;
					padding-left:40px;
					padding-right:40px;
					padding-top:3px;
					padding-bottom:3px;
					margin-bottom:14px;
					margin-left:8px;				
  }

как сделать что бы при наведении на картинку с title = 'fourImg'
значение
content:'30x30cm=55$ 40x60cm=80$ 50x70cm=100$ 60x80cm=110$ 90x120cm=180$
поменялось на значение
content:'30x30cm=55$ 40x60cm=80$ 50x70cm=100$ 60x80cm=110$ 90x120cm=190$

devote · #2 (**permalink**) 10.09.2012, 21:06

Сообщение от sprightly

::after

псевдо-элемент after не доступен из JavaScript, можно вывернутся с помощью CSS но нужен не только кусок CSS , но и сам HTML. А желательно ссылку на страницу где это происходит.

sprightly · #3 (**permalink**) 11.09.2012, 20:00

<div class="thumbnail"> <a href="images/big/abstract/abstract2.jpg" rel="prettyPhoto[portfolio]"> 
                  <img src="images/thumbnails/abstract/abstract2.jpg" alt="" /> 
                  </a>   
                  <noidex><span class="priceforimg">Цены!</span></noidex></div>

<div class="thumbnail"> <a href="images/big/abstract/abstract3.jpg" rel="prettyPhoto[portfolio]"> 
                  <img src="images/thumbnails/abstract/abstract3.jpg" alt="" /> 
                  </a>   
                  <noidex><span class="priceforimg"  title="fourImg">Цены!</span></noidex></div>

вот html код

devote · #4 (**permalink**) 11.09.2012, 21:36

<style type="text/css">
.priceforimg{ display: inline-block;
              position:relative;    
                            background:url(/money.png) no-repeat center left;
padding-left:20px;
border-bottom: 1px dotted #e1e1e1;
cursor: default;
 
               
              }
.priceforimg:hover::after
{ 
  content:'30x30cm=55$ 40x60cm=80$ 50x70cm=100$ 60x80cm=110$ 90x120cm=180$ ';
                    color: rgb(0,0,0);
                    background: rgba(255,255,255,0.8);
                    font-size:13px;
                    font-family: "Comic Sans MS", cursive;
                    text-align:center;
                    z-index:1;
                    border:1px solid rgba(0,0,0,0.3);
                    -moz-border-radius-bottomright:20px;
                    -moz-border-radius-topleft:20px;
                    -moz-border-radius-topright:20px;
                    -webkit-border-bottom-right-radius:20px;
                    -webkit-border-top-right-radius:20px;
                    -webkit-border-top-left-radius:20px;
                    position: absolute;
                    bottom:0px;
                    padding-left:40px;
                    padding-right:40px;
                    padding-top:3px;
                    padding-bottom:3px;
                    margin-bottom:14px;
                    margin-left:8px;                
  }
.priceforimg[title="fourImg"]:hover::after {
    content:'30x30cm=55$ 40x60cm=80$ 50x70cm=100$ 60x80cm=110$ 90x120cm=190$';
}
</style>

<div class="thumbnail"> <a href="images/big/abstract/abstract2.jpg" rel="prettyPhoto[portfolio]"> 
                  <img src="images/thumbnails/abstract/abstract2.jpg" alt="" /> 
                  </a>   
                  <noidex><span class="priceforimg">Цены!</span></noidex></div>




показать чистый исходник в новом окне
Скрыть/показать номера строк
печать кода с сохранением подсветки<div class="thumbnail"> <a href="images/big/abstract/abstract3.jpg" rel="prettyPhoto[portfolio]"> 
                  <img src="images/thumbnails/abstract/abstract3.jpg" alt="" /> 
                  </a>   
                  <noidex><span class="priceforimg"  title="fourImg">Цены!</span></noidex></div>

sprightly · #5 (**permalink**) 12.09.2012, 14:08

Спасибо !!!!!! все работает

Форум

Справочник

Discord чат

Курсы javascript