CSS позиционное фоном изменение на оси Y только
Попробуйте это
def index(request):
if request.method == "GET":
symbol = request.GET.get('symbol', None)
if symbol is not None or symbol != "":
request.session['symbol'] = symbol
else:
symbol = request.session['symbol']
return render(request, 'backtests/earnings.html', {'symbol': symbol})
else:
redirect to path
4 ответа
You do not need a second icon set nor the use of JavaScript to achieve the desired effect.
As Lou pointed out, use opacity to make your icons 30% or fully visible. No need to mess with background-position anymore.
Just go ahead and define your styles accordingly to the following:
a {
opacity:0.3; /* for standard browsers */
filter: alpha(opacity = 30); /* for IE */
display: block;
float: left;
width: 25px;
height: 25px;
background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}
a:hover {
opacity:1.0
filter: alpha(opacity = 100);
}
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
If you are worried about validation of your CSS code, take the IE-specific parts (which won't validate) and put them in specifically targeted CSS files via conditional comments.
Hope that helps.
Я полагаю, что ответ Лу делает то, что вы хотите, - вам просто нужно определить класс для каждого состояния и установить координаты x и y.
Если вы хотели получить эффект от затем исчезает jQuery дает вам способ сделать это . Это, вероятно, может дать вам то, что вы хотите, если это так:
$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
function() {
$(this).fadeTo(300, 1.0);
},
function() {
$(this).fadeTo(1, 0.33);
}
);
РЕДАКТИРОВАТЬ : обновлено на основе обратной связи. Начальная непрозрачность теперь установлена.
Note: For this to work in Mozilla, the background-attachment property must be set to "fixed".
Does that have any bearing?
--
You only have 10 images, just define a css class for each one. That way you can specify the relative x coord.
ps. I hope you aren't using that exact css, applying that style to a:hover would apply to all links on the page. You should be applying it to only the imaged style.
a { display: block;
float: left;
width: 25px;
height: 25px;
background: url("test.jpg") 0 -25px no-repeat;
}
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }
There is also opacity..
Некоторые небольшие упущения, опечатки и ненужный код в предыдущем примере. Предположите, ваш код может выглядеть примерно так:
<style>
a { float: left; width: 25px; height: 25px; background-image: url("250_x_50_spriteimage.jpg"); }
a.thumb1 { background-position: 0 0; }
a.thumb2 { background-position: -25px 0; }
a.thumb3 { background-position: -50px 0; }
a { filter: alpha(opacity=30); -moz-opacity:.3; opacity:.3; }
a:hover { filter: alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; }
</style>
<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb2"></a>
<a href="largeimage2.jpg" class="thumb3"></a>