И Снова Вопрос Про Css

[Jack Noir]

Господа,

есть сайт. С header-ом, само собой. К header-у применено свойство opacity (прозрачности), которое изменяется при наведении курсора (hover).

Логотип сайта, судя по css, является подклассом заголовка, то есть #bar.logo. (bar- класс заголовка). Соответственно, логотип перенимает себе свойства самого заголовка, в том числе и прозрачность.

Суть вопроса - нужно сделать так, чтобы логотип сайта (изображение) был видимым в любом случае, а при наведении курсора появлялся остальной кусок заголовка.

Насколько знаю, для этого нужно вывести логотип из подкласса в отдельный класс. Как?

 

Вот кусок файла style.css:

 

#bar {

        opacity: 0.1 !important;

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 3em;

z-index: 500;

background-color: #fdfdfd;

color: #282828;

box-shadow: 0 0 .5em rgba( 40, 40, 40, .3 );

}

.logo img {opacity: 1 !important;}

.focus #bar {

position: fixed;

top: -3em;

box-shadow: none;

-webkit-transition: top .3s .5s;

-moz-transition: top .3s .5s;

-o-transition: top .3s .5s;

-ms-transition: top .3s .5s;

transition: top .3s .5s;

}

 

.touch .focus #bar,

.choosing #bar,

.no-touch .focus #bar:hover,

.over #bar {

-webkit-transition-delay: 0;

-moz-transition-delay: 0;

-o-transition-delay: 0;

-ms-transition-delay: 0;

transition-delay: 0;

}

 

.choosing #bar,

.no-touch .focus #bar:hover,

.over #bar {

top: 0;

}

 

.no-touch #bar:hover,

#bar.select {

opacity: 1 !important;

-webkit-transition: opacity .4s;

-moz-transition: opacity .4s;

-o-transition: opacity .4s;

-ms-transition: opacity .4s;

transition: opacity .4s;

}

 

#bar .logo {

float: left;

font-size: 100%;

line-height: 3em;

margin-bottom: 0;

}

 

#bar .logo a {

display: inline-block;

padding: 0 1.4em;

-webkit-transition: box-shadow .2s;

-moz-transition: box-shadow .2s;

-o-transition: box-shadow .2s;

-ms-transition: box-shadow .2s;

transition: box-shadow .2s;

}

 

.no-touch #bar .logo a:hover {

box-shadow: 0 0 1.5em #fdfdfd;

                                opacity: 1;

}

 

[Anar Aghayev]

В HTML-е удали старые и создай класс для этого логотипа, и управляй этим же классом в CSS.. думаю так.  Если не трудно покажи HTML, часть где находиться этот логотип.

[Le_MaR]

попробуй применить к классу логотипа opacity со свойством !important

 

Уже сделали вижу)) тогда надо убрать от bar !important

Edited February 7, 2014 by Le_MaR

[Le_MaR]

Так тоже не будет работать.

 

Решение такое давать бекграунд  header-y через rgba (  background-color: rgba(128,64,0,0.75)  )  где 0.75 управление прозрачностью

[Jack Noir]

В HTML-е удали старые и создай класс для этого логотипа, и управляй этим же классом в CSS.. думаю так.  Если не трудно покажи HTML, часть где находиться этот логотип.

<!-- header -->

<nav id="bar">

 

<?php if ( $i = op_theme_opt( 'title-image' ) ) : ?>

 

<!-- logo -->

<h3 class="logo"><a href="<?php echo home_url( '/' ); ?>"><img src="<?php photochrom_get_media_url( $i, 'full'); ?>" alt="<?php esc_attr_e( op_theme_opt( 'title-textual' ) ); ?>" /></a></h3>

 

<?php else : ?>

 

<!-- logo -->

<h3 class="logo"><a href="<?php echo home_url( '/' ); ?>" ><?php echo op_theme_opt( 'title-textual' ); ?></a></h3>

 

<?php endif; ?>

 

<!-- menu -->

<ul class="menu">

 

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'menu', 'menu_id' => 'menu', 'depth' => 1, 'fallback_cb' => '', 'items_wrap' => '%3$s' ) ); ?>

 

<?php get_template_part( 'part', 'social' ); ?>

 

</ul>

<!-- end: menu -->

 

<!-- menu trigger -->

<div class="trigger"><a href="#" title="<?php esc_attr_e( __( 'Sections', 'openframe' ) ); ?>"><span class="icon-menu"></span></a></div>

 

</nav>

<!-- end: header -->

 

[Jack Noir]

попробуй применить к классу логотипа opacity со свойством !important

 

Уже сделали вижу)) тогда надо убрать от bar !important

С этим опэйсити я уже крутил и так и сяк, добавлял и убирал !important - не помогает.

 

Решение такое давать бекграунд  header-y через rgba (  background-color: rgba(128,64,0,0.75)  )  где 0.75 управление прозрачностью

 

 

А нельзя так же управлять непосредственно логотипом, а не хеадером? 

[Le_MaR]

 
Можно ) Через rgba можете управлять независимо 
 
Пример
 
 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
 
<style>
.head {width:100%; background-color: rgba(128,64,0,0.25); height:200px;}
.logo {
width: 150px;
height: 150px;
background-color: rgba(255,0,0,0.65);

}
 
.logo:hover {
width: 150px;
height: 150px;
background-color: rgba(255,0,0,0.15);

}
</style>
</head>
 
<body>
 
<div class="head">
<div class="logo"></div>
</div>
</body>
</html>

Edited February 7, 2014 by Le_MaR

[Jack Noir]

 

Можно ) Через rgba можете управлять независимо 

 

Пример

 

 

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

 

<style>

.head {width:100%; background-color: rgba(128,64,0,0.25); height:200px;}

.logo {

width: 150px;

height: 150px;

background-color: rgba(255,0,0,0.65);

}

 

.logo:hover {

width: 150px;

height: 150px;

background-color: rgba(255,0,0,0.15);

}

</style>

</head>

 

<body>

 

<div class="head">

<div class="logo"></div>

</div>

</body>

</html>

Неа, не катит. Вообще с этим шаблоном какие-то непонятки постоянно. 

[Le_MaR]

Почему не катит?)

[Jack Noir]

Почему не катит?)

Не обрабатывается код, видимо где-то есть оверрайд его.